/* ============================================================
   AVZO AGENCY — style.css  v3.0  "Liquid Archive"
   No boxes. No weight. Light · Type · Space.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:#050505; --white:#fff;
  --blue:#2979ff; --blue-light:#82b1ff; --cyan:#00e5ff;
  --font:'Inter',sans-serif; --font-d:'Space Grotesk','Inter',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --theme-bg:#050505; --theme-accent:#2979ff;
  --theme-accent2:#00e5ff; --theme-border:rgba(255,255,255,.05);
}

html,body{
  width:100%;height:100%;
  background:var(--theme-bg);
  color:var(--white);font-family:var(--font);
  overflow:hidden;cursor:none;
  transition:background-color 1.2s ease;
  -webkit-font-smoothing:antialiased;
}

/* ── Cursors ── */
#cursor-dot,#cursor-ring{
  position:fixed;top:0;left:0;border-radius:50%;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
}
#cursor-dot{width:4px;height:4px;background:#fff;}
#cursor-ring{
  width:30px;height:30px;
  border:1px solid rgba(255,255,255,.3);
  transition:width .35s var(--ease),height .35s var(--ease),border-color .35s;
}
body.cursor-hover #cursor-ring{width:50px;height:50px;border-color:var(--theme-accent);}
body.cursor-drag  #cursor-ring{width:58px;height:58px;border-color:var(--cyan);border-style:dashed;}

/* ── Canvases ── */
#gl-canvas,#particle-canvas{
  position:fixed;inset:0;width:100%;height:100%;pointer-events:none;
}
#gl-canvas{z-index:0;}
#particle-canvas{z-index:1;}

/* ── World ── */
#world-container{position:fixed;inset:0;z-index:2;overflow:hidden;cursor:grab;}
#world-container:active{cursor:grabbing;}
#world{position:absolute;width:6000px;height:6000px;top:0;left:0;will-change:transform;}

/* ══════════════════════════════════════════
   HUD HEADER
══════════════════════════════════════════ */
#hud-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 44px;
  background:linear-gradient(to bottom,rgba(5,5,5,.75) 0%,transparent 100%);
}
.hud-logo{display:flex;align-items:center;gap:9px;font-family:var(--font-d);font-weight:600;font-size:14px;letter-spacing:.18em;}
.logo-mark{color:var(--theme-accent);font-size:15px;animation:logoSpin 10s linear infinite;display:inline-block;}
@keyframes logoSpin{to{transform:rotate(360deg);}}

.hud-nav{display:flex;gap:36px;}
.hud-link{
  font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.35);text-decoration:none;transition:color .3s;position:relative;
}
.hud-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--theme-accent);transition:width .35s var(--ease);}
.hud-link:hover{color:rgba(255,255,255,.8);}
.hud-link:hover::after{width:100%;}

.hud-right{display:flex;align-items:center;gap:20px;}

/* ── Language Switcher ── */
#lang-switcher{display:flex;align-items:center;gap:6px;}
.lang-btn{
  background:none;border:none;cursor:pointer;
  font-family:var(--font);font-size:10px;font-weight:500;
  letter-spacing:.18em;color:rgba(255,255,255,.25);
  transition:color .25s;padding:2px 0;
}
.lang-btn:hover{color:rgba(255,255,255,.6);}
.lang-btn--active{color:var(--theme-accent);}
.lang-sep{font-size:10px;color:rgba(255,255,255,.1);}

.hud-status{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.2);}
.status-dot{width:5px;height:5px;border-radius:50%;background:#00e676;box-shadow:0 0 6px #00e676;animation:sPulse 2.5s ease infinite;}
@keyframes sPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.75);}}

/* ══════════════════════════════════════════
   FLOATING NODES
══════════════════════════════════════════ */
.node{position:absolute;transform:translate(-50%,-50%);z-index:10;}

.node__plate{
  position:relative;padding:48px 52px;
  background:rgba(255,255,255,.018);
  border:1px solid var(--theme-border);
  border-radius:4px;
  backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);
  min-width:360px;max-width:430px;
  animation:nodeBob 8s ease-in-out infinite;
  transition:border-color .8s ease,background .8s ease;
}
.node__plate--sparse{min-width:330px;max-width:390px;padding:44px 48px;background:rgba(255,255,255,.012);border-color:rgba(255,255,255,.04);}
.node__plate--quote{min-width:270px;max-width:340px;padding:40px 44px;background:transparent;border-color:rgba(255,255,255,.04);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.node__plate--minimal{min-width:240px;max-width:310px;padding:36px 40px;background:transparent;border-color:rgba(255,255,255,.035);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}

#island-web  .node__plate{animation-delay:-2s;  animation-duration:9s;}
#island-auto .node__plate{animation-delay:-4.5s;animation-duration:7s;}
#island-philosophy .node__plate{animation-delay:-6s;animation-duration:10s;}
#island-contact    .node__plate{animation-delay:-1s;animation-duration:8.5s;}

@keyframes nodeBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

.node__eyebrow{display:block;font-size:9px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:22px;}
.node__eyebrow--accent {color:var(--theme-accent); opacity:.75;}
.node__eyebrow--accent2{color:var(--theme-accent2);opacity:.75;}

.node__wordmark{font-family:var(--font-d);font-size:68px;font-weight:700;line-height:.92;letter-spacing:-.04em;margin-bottom:18px;background:linear-gradient(150deg,#fff 40%,rgba(255,255,255,.5) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.node__wordmark-thin{font-family:var(--font);font-size:14px;font-weight:200;font-style:italic;letter-spacing:.08em;background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.5));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-bottom:4px;}

.node__heading{font-family:var(--font-d);font-size:42px;font-weight:700;line-height:.95;letter-spacing:-.03em;margin-bottom:18px;color:rgba(255,255,255,.92);}
.node__heading br + *,.node__heading-ghost{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);}

.node__line{font-size:12px;font-weight:300;letter-spacing:.06em;color:rgba(255,255,255,.3);margin-bottom:24px;}
.node__rule{width:32px;height:1px;background:rgba(255,255,255,.14);margin-bottom:24px;}

.node__desc{font-size:13px;font-weight:300;line-height:1.78;color:rgba(255,255,255,.38);margin-bottom:22px;letter-spacing:.01em;}

.node__list{list-style:none;margin-bottom:28px;}
.node__list li{font-size:10px;font-weight:400;letter-spacing:.16em;color:rgba(255,255,255,.32);padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);text-transform:uppercase;transition:color .25s,padding-left .25s var(--ease);}
.node__list li:first-child{border-top:1px solid rgba(255,255,255,.05);}
.node__list li:hover{color:rgba(255,255,255,.65);padding-left:7px;}

.node__ghost-link{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.3);transition:color .3s var(--ease),gap .3s var(--ease);}
.node__ghost-link:hover{color:rgba(255,255,255,.8);gap:13px;}
.node__ghost-link--large{font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.45);}
.node__ghost-link--large:hover{color:#fff;}

.node__cta{display:inline-flex;align-items:center;gap:8px;margin-top:26px;padding:0;background:none;border:none;font-family:var(--font);font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.3);cursor:pointer;transition:color .3s var(--ease);position:relative;}
.node__cta::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:1px;background:var(--theme-accent);transition:width .4s var(--ease);}
.node__cta:hover{color:rgba(255,255,255,.8);}
.node__cta:hover::after{width:100%;}

.node__pullquote-mark{font-size:68px;line-height:.5;display:block;color:rgba(255,255,255,.06);font-family:Georgia,serif;margin-bottom:18px;}
.node__pullquote{font-family:var(--font);font-size:18px;font-weight:200;font-style:italic;line-height:1.65;letter-spacing:-.01em;color:rgba(255,255,255,.6);margin-bottom:18px;}
.node__cite{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.18);}

.node__invite{font-family:var(--font-d);font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:rgba(255,255,255,.78);margin:14px 0 26px;}

/* ══════════════════════════════════════════
   SECTOR INPUT
══════════════════════════════════════════ */
#sector-input-wrap{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.06);}
.sector-label{font-size:9px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:9px;}
.sector-field-row{display:flex;align-items:center;gap:11px;}
.sector-input{flex:1;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;padding:8px 0;font-family:var(--font);font-size:13px;font-weight:300;letter-spacing:.03em;color:#fff;outline:none;caret-color:var(--theme-accent);transition:border-color .5s ease;}
.sector-input::placeholder{color:rgba(255,255,255,.16);}
.sector-input:focus{border-color:var(--theme-accent);}
.sector-indicator{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.1);flex-shrink:0;transition:background .6s ease,box-shadow .6s ease;}
.sector-theme-label{margin-top:7px;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--theme-accent);opacity:0;min-height:13px;transition:color .6s ease;}

/* ══════════════════════════════════════════
   COORDS HUD
══════════════════════════════════════════ */
#coords-hud{position:fixed;bottom:28px;left:36px;z-index:100;display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.15);font-family:'Courier New',monospace;}
.coords-label{font-size:13px;color:rgba(255,255,255,.08);}
.coords-sep{color:rgba(255,255,255,.08);}

/* ══════════════════════════════════════════
   MINI-MAP
══════════════════════════════════════════ */
#minimap{
  position:fixed;bottom:28px;left:100px;z-index:100;
  width:110px;height:70px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:3px;
  backdrop-filter:blur(8px);
  overflow:hidden;
}
#minimap-view{
  position:absolute;
  background:var(--theme-accent);
  opacity:.35;
  border-radius:2px;
  pointer-events:none;
  transition:left .1s,top .1s;
}
.minimap-label{
  position:absolute;bottom:4px;right:6px;
  font-size:7px;letter-spacing:.18em;color:rgba(255,255,255,.2);
  font-family:'Courier New',monospace;
}

/* ══════════════════════════════════════════
   CONNECT BUTTON
══════════════════════════════════════════ */
#connect-btn-wrapper{position:fixed;bottom:40px;right:40px;z-index:100;}
#connect-btn{
  position:relative;width:86px;height:86px;border-radius:50%;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);
  color:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:background .4s,border-color .4s,transform .4s var(--ease);
}
#connect-btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);transform:scale(1.06);}
.connect-btn__label{font-size:9px;font-weight:600;letter-spacing:.22em;position:relative;z-index:1;}
.connect-btn__sub{font-size:7px;letter-spacing:.1em;color:rgba(255,255,255,.3);position:relative;z-index:1;}
.connect-btn__ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.1);top:50%;left:50%;transform:translate(-50%,-50%) scale(1);animation:ringExpand 3.5s ease-out infinite;}
.connect-btn__ring--1{width:86px;height:86px;animation-delay:0s;}
.connect-btn__ring--2{width:86px;height:86px;animation-delay:1.2s;}
.connect-btn__ring--3{width:86px;height:86px;animation-delay:2.4s;}
@keyframes ringExpand{0%{transform:translate(-50%,-50%) scale(1);opacity:.5;}100%{transform:translate(-50%,-50%) scale(2.8);opacity:0;}}

/* ══════════════════════════════════════════
   DRAG HINT
══════════════════════════════════════════ */
#drag-hint{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.18);animation:hintFade 5s ease 2s forwards;opacity:0;}
.drag-hint__icon{font-size:20px;animation:hintSpin 5s linear infinite;}
@keyframes hintFade{0%{opacity:0;}20%{opacity:1;}80%{opacity:1;}100%{opacity:0;pointer-events:none;}}
@keyframes hintSpin{to{transform:rotate(360deg);}}

/* ══════════════════════════════════════════
   FORM OVERLAY
══════════════════════════════════════════ */
#form-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s;}
#form-overlay.is-open{opacity:1;pointer-events:all;}
#form-backdrop{position:absolute;inset:0;background:rgba(5,5,5,.9);backdrop-filter:blur(16px);}
#form-modal{position:relative;width:100%;max-width:450px;margin:20px;background:rgba(10,10,16,.97);border:1px solid rgba(255,255,255,.07);border-radius:5px;padding:50px;transform:translateY(22px) scale(.97);transition:transform .45s var(--ease);}
#form-overlay.is-open #form-modal{transform:translateY(0) scale(1);}
#form-close{position:absolute;top:20px;right:20px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.4);font-size:12px;cursor:pointer;transition:background .25s,color .25s;}
#form-close:hover{background:rgba(255,255,255,.09);color:#fff;}

.form-header{margin-bottom:34px;}
.form-header__badge{display:inline-block;font-size:9px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:3px;margin-bottom:18px;}
.form-header__title{font-family:var(--font-d);font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.02em;margin-bottom:9px;}
.form-header__sub{font-size:13px;font-weight:300;color:rgba(255,255,255,.32);line-height:1.65;}

.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:9px;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:7px;}
.form-group input,.form-group textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;padding:9px 0;font-family:var(--font);font-size:13px;font-weight:300;color:#fff;outline:none;resize:none;transition:border-color .3s;}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.14);}
.form-group input:focus,.form-group textarea:focus{border-color:rgba(255,255,255,.38);}

.btn-submit{width:100%;margin-top:10px;padding:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:3px;color:#fff;font-family:var(--font);font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background .3s,border-color .3s,transform .25s var(--ease);}
.btn-submit:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2);transform:translateY(-1px);}
.btn-submit:disabled{opacity:.35;cursor:not-allowed;transform:none;}

.form-footer{margin-top:18px;font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.14);text-align:center;}

#form-success{text-align:center;padding:44px 0;}
.success-icon{font-size:38px;color:rgba(255,255,255,.55);margin-bottom:18px;animation:successPop .7s var(--ease);}
@keyframes successPop{from{transform:scale(0) rotate(-90deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}
#form-success h3{font-family:var(--font-d);font-size:24px;font-weight:600;margin-bottom:9px;}
#form-success p{font-size:13px;font-weight:300;color:rgba(255,255,255,.35);}

/* ── Form field hint / validation ── */
.form-field-hint{
  display:block;margin-top:5px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.2);min-height:13px;
  transition:color .3s;
}
.form-field-hint--error{
  color:rgba(255,120,100,.75);
}

/* ══════════════════════════════════════════
   RESPONSIVE — 3 breakpoints
   768px : tablet / landscape mobile
   480px : portrait phone
   All measurements tuned for thumb reach
══════════════════════════════════════════ */

/* ── Tablet / large mobile ── */
@media(max-width:768px){

  /* HUD */
  #hud-header{padding:14px 18px;}
  .hud-nav{display:none;}
  .hud-right{gap:12px;}
  .hud-logo{font-size:13px;}

  /* World — touch cursor visible */
  #world-container{cursor:default;}

  /* Nodes — wider, less padding so content fits on phone */
  .node__plate{
    min-width:min(280px, 88vw);
    max-width:92vw;
    padding:28px 24px;
  }
  .node__plate--sparse{
    min-width:min(260px, 88vw);
    padding:26px 22px;
  }
  .node__plate--quote{
    min-width:min(240px, 82vw);
    padding:24px 20px;
  }
  .node__plate--minimal{
    min-width:min(220px, 80vw);
    padding:22px 18px;
  }

  /* Typography scale-down */
  .node__wordmark{font-size:48px;}
  .node__wordmark-thin{font-size:13px;}
  .node__heading{font-size:32px;}
  .node__pullquote{font-size:16px;}
  .node__invite{font-size:22px;}

  /* Sector input — thumb-friendly height */
  .sector-input{
    font-size:16px; /* prevents iOS zoom on focus */
    padding:10px 0;
  }
  .sector-label{font-size:10px;}

  /* Form */
  #form-modal{padding:28px 20px;max-width:100%;}
  .form-header__title{font-size:26px;}
  .form-group input,
  .form-group textarea{
    font-size:16px; /* prevents iOS auto-zoom */
    padding:11px 0;
  }
  .btn-submit{padding:16px;font-size:12px;}

  /* Connect button */
  #connect-btn-wrapper{bottom:16px;right:16px;}
  #connect-btn{width:72px;height:72px;}
  .connect-btn__label{font-size:8px;}
  .connect-btn__ring--1,.connect-btn__ring--2,.connect-btn__ring--3{
    width:72px;height:72px;
  }

  /* Coords HUD */
  #coords-hud{bottom:20px;left:16px;font-size:9px;}

  /* Mini-map — scaled to 15% of original (110px → ~65px wide) */
  #minimap{
    width:68px; height:44px;
    bottom:20px; left:80px;
    border-radius:2px;
  }
  .minimap-label{font-size:6px;bottom:2px;right:4px;}

  /* Drag hint */
  #drag-hint{bottom:84px;font-size:9px;}
  .drag-hint__icon{font-size:18px;}

  /* Hide edge-scroll indicator on touch */
  body.cursor-hover #cursor-ring,
  body.cursor-drag  #cursor-ring,
  #cursor-dot,#cursor-ring{display:none;}
}

/* ── Portrait phone ── */
@media(max-width:480px){

  #hud-header{padding:12px 14px;}

  .node__plate{
    min-width:min(240px, 90vw);
    padding:22px 18px;
  }
  .node__wordmark{font-size:40px;}
  .node__heading{font-size:26px;}
  .node__desc{font-size:12px;}
  .node__list li{font-size:9px;padding:6px 0;}
  .node__pullquote{font-size:14px;}
  .node__invite{font-size:18px;}

  /* Sector input enlarged for easy typing */
  #sector-input-wrap{margin-top:18px;padding-top:16px;}
  .sector-input{font-size:16px;padding:12px 0;}

  /* Form bottom-sheet feel */
  #form-modal{
    margin:0; border-radius:16px 16px 0 0;
    position:fixed; bottom:0; left:0; right:0;
    max-width:100%; padding:28px 20px 40px;
    transform:translateY(100%) !important;
  }
  #form-overlay.is-open #form-modal{
    transform:translateY(0) !important;
  }
  .form-header__title{font-size:22px;}

  /* Mini-map hidden on very small screens */
  #minimap{display:none;}

  /* Lang switcher compact */
  #lang-switcher{gap:4px;}
  .lang-btn{font-size:9px;}
  .lang-sep{font-size:8px;}

  /* Connect button */
  #connect-btn-wrapper{bottom:12px;right:12px;}
  #connect-btn{width:64px;height:64px;}
  .connect-btn__ring--1,.connect-btn__ring--2,.connect-btn__ring--3{
    width:64px;height:64px;
  }
}

/* ── Landscape phone (short viewport) ── */
@media(max-height:500px) and (max-width:900px){
  #hud-header{padding:10px 18px;}
  .node__plate{padding:18px 20px;}
  .node__wordmark{font-size:36px;}
  #connect-btn-wrapper{bottom:10px;right:14px;}
  #minimap{display:none;}
  #drag-hint{display:none;}
}

/* ── Touch device: swap grab cursors ── */
@media(hover:none){
  #world-container{cursor:default;}
  #world-container:active{cursor:default;}
}