/* ============================================================
   SORAWAVE LABS — Design System
   Monochrome / FranXX-HUD language / Apple-style stacked pages
   ============================================================ */

:root{
  --black:#0A0A0A;
  --carbon:#171717;
  --panel:#141414;
  --line:#2A2A2A;
  --line-light:#DADADA;
  --white:#FFFFFF;
  --paper:#F5F5F7;
  --dim:#8A8A8A;
  --faint:#3A3A3A;

  --din-c:"DIN Condensed","Oswald","Arial Narrow",sans-serif;
  --din-a:"DIN Alternate","Barlow","Helvetica Neue",sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Hiragino Sans GB",sans-serif;

  --nav-h:52px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- shared type utilities ---------- */
.label{
  font-family:var(--din-a);font-weight:700;
  text-transform:uppercase;letter-spacing:.42em;
  font-size:12px;color:var(--dim);
}
.jp{font-family:var(--jp);letter-spacing:.32em;font-size:12px;color:var(--dim)}
.display{
  font-family:var(--din-c);font-weight:700;text-transform:uppercase;
  line-height:.92;letter-spacing:.03em;margin:0;
}
.codebox{
  display:inline-block;border:3px solid currentColor;border-radius:10px;
  padding:2px 16px;font-family:var(--din-c);font-weight:700;
  font-size:20px;letter-spacing:.26em;text-transform:uppercase;
}

/* ---------- HUD decorations ---------- */
.hud-line{position:absolute;background:currentColor;opacity:.45}
.hud-sq{position:absolute;background:currentColor}

/* ---------- buttons (Apple-style pills, mono) ---------- */
.btn{
  display:inline-block;padding:11px 26px;border-radius:980px;
  font-family:var(--din-a);font-weight:700;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  border:1.5px solid currentColor;transition:transform .18s ease,opacity .18s ease;
}
.btn:hover{transform:translateY(-1px);opacity:.85}
.btn.solid{background:var(--white);color:var(--black);border-color:var(--white)}
.section.light .btn.solid{background:var(--black);color:var(--white);border-color:var(--black)}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- navbar (rendered by <sw-navbar>) ---------- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:rgba(10,10,10,.78);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.navbar .inner{
  max-width:1024px;margin:0 auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;gap:26px;
}
.navbar .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.navbar .brand img{height:22px;width:auto}
.navbar .brand span{
  font-family:var(--din-c);font-weight:700;font-size:17px;
  letter-spacing:.08em;color:var(--white);
}
.navbar nav{display:flex;gap:30px;align-items:center}
.navbar nav a{
  font-family:var(--din-a);font-weight:700;font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;
  color:#C9C9C9;text-decoration:none;transition:color .15s;
}
.navbar nav a:hover,.navbar nav a[aria-current="page"]{color:var(--white)}
/* hamburger + mobile overlay menu */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:6px;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:1.6px;background:var(--white);transition:transform .3s ease,opacity .3s ease}
.nav-overlay{display:none}

@media (max-width:740px){
  .navbar nav{display:none}
  .nav-toggle{display:flex}
  sw-navbar.open .nav-toggle span:nth-child(1){transform:translateY(3.8px) rotate(45deg)}
  sw-navbar.open .nav-toggle span:nth-child(2){transform:translateY(-3.8px) rotate(-45deg)}
  .nav-overlay{
    position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:99;
    background:rgba(10,10,10,.94);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
  }
  sw-navbar.open .nav-overlay{display:block}
  .nav-overlay nav{display:flex;flex-direction:column;padding:26px 28px}
  .nav-overlay a{
    font-family:var(--din-c);font-weight:700;font-size:38px;
    letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
    color:#C9C9C9;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-overlay a[aria-current="page"],.nav-overlay a:hover{color:var(--white)}
}

/* ---------- full-height stacked sections (Apple style) ---------- */
main{display:block}
.section{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  padding:calc(var(--nav-h) + 48px) 24px 64px;
  background:var(--black);color:var(--white);
}
.section.light{background:var(--paper);color:var(--black)}
.section.carbon{background:var(--carbon)}
.section.half{min-height:72vh}

.section .kicker{margin-bottom:14px}
.section h1.display{font-size:clamp(58px,10vw,140px)}
.section h2.display{font-size:clamp(46px,7.5vw,104px)}
.section h1.display,.section h2.display,.page-hero h1.display{margin-top:22px}
.section .tagline{
  font-size:clamp(17px,2.2vw,24px);color:#B9B9B9;
  margin:18px 0 26px;max-width:34em;
}
.section.light .tagline{color:#4A4A4A}
.section .visual{margin-top:52px;width:min(560px,78vw)}
.section .visual img{width:100%;height:auto}

/* scroll reveal */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.25,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}
  .reveal.d2{transition-delay:.16s}
  .reveal.d3{transition-delay:.24s}

  /* ---- HUD choreography (FranXX credits style) ----
     Lines draw themselves in when they enter the viewport,
     squares pop once their line has landed, then everything
     breathes slowly so the page never feels frozen.
     main.js tags each line .hl (horizontal) or .vl (vertical). */
  .hud-line{transition:transform 1.1s cubic-bezier(.22,.8,.2,1)}
  .hud-line.hl{transform:scaleX(0);transform-origin:left center}
  .hud-line.vl{transform:scaleY(0);transform-origin:center top}
  .hud-line.in{transform:none}
  div.hud-line:nth-of-type(2){transition-delay:.25s}
  div.hud-line:nth-of-type(3){transition-delay:.45s}
  div.hud-line:nth-of-type(4){transition-delay:.6s}
  div.hud-line:nth-of-type(5){transition-delay:.75s}
  .hud-line.in{animation:hudBreathe 9s ease-in-out 3s infinite}
  .hud-sq{opacity:0;transition:opacity .25s steps(2,end) .95s}
  .hud-sq.in{opacity:1;animation:hudBlink 7s steps(1,end) 2.5s infinite}
  @keyframes hudBreathe{
    0%,100%{opacity:.45}
    48%{opacity:.45}
    52%{opacity:.2}
    58%{opacity:.45}
  }
  @keyframes hudBlink{
    0%,100%{opacity:1}
    41%{opacity:1}
    43%{opacity:.15}
    45%{opacity:1}
    83%{opacity:1}
    84.5%{opacity:.3}
    86%{opacity:1}
  }

  /* ---- long diagonals that draw across (FranXX credits) ---- */
  .hud-diag{
    transform:rotate(var(--r,-26deg)) scaleX(0);
    transition:transform 1.5s cubic-bezier(.22,.8,.2,1) .35s;
  }
  .hud-diag.in{transform:rotate(var(--r,-26deg)) scaleX(1)}

  /* ---- sketch draw-in: strokes trace the shape, then it fills ---- */
  .mark-draw path{
    fill-opacity:0;
    stroke:currentColor;stroke-width:2.5;
    stroke-dasharray:100;stroke-dashoffset:100;
  }
  .mark-draw.in path{animation:sketchDraw 1.1s cubic-bezier(.3,.5,.3,1) forwards}
  .draw-title text{
    fill-opacity:0;
    stroke:currentColor;stroke-width:1.4;
    stroke-dasharray:1600;stroke-dashoffset:1600;
  }
  .draw-title.in text{animation:sketchDrawText 1.1s cubic-bezier(.3,.5,.3,1) forwards}
  /* fill blends in WHILE the stroke finishes: no dead gap between phases */
  @keyframes sketchDraw{
    0%{stroke-dashoffset:100;fill-opacity:0;stroke-opacity:1}
    50%{fill-opacity:0}
    62%{stroke-dashoffset:0}
    85%{fill-opacity:1;stroke-opacity:1}
    100%{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}
  }
  @keyframes sketchDrawText{
    0%{stroke-dashoffset:1600;fill-opacity:0;stroke-opacity:1}
    50%{fill-opacity:0}
    62%{stroke-dashoffset:0}
    85%{fill-opacity:1;stroke-opacity:1}
    100%{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0}
  }
  /* safety net: main.js adds .done after the animation window;
     forces the finished state even if the animation was interrupted */
  .draw.done path,.draw.done text{
    animation:none !important;
    fill-opacity:1 !important;
    stroke-opacity:0 !important;
    stroke-dashoffset:0 !important;
  }

  /* ---- section labels: tracking expands like rolling credits ---- */
  .section .label.reveal{letter-spacing:.12em}
  .section .label.reveal.in{animation:trackIn 1.1s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes trackIn{
    from{letter-spacing:.12em}
    to{letter-spacing:.42em}
  }

  /* ---- codebox: occasional signal flicker ---- */
  .codebox.reveal.in{animation:codeFlicker 8s steps(1,end) 3.5s infinite}
  @keyframes codeFlicker{
    0%,100%{opacity:1}
    46%{opacity:1}
    47.5%{opacity:.25}
    49%{opacity:1}
  }
}

/* diagonals: static geometry (animation gated above) */
.hud-diag{
  position:absolute;height:1px;background:currentColor;opacity:.4;
  transform-origin:left center;transform:rotate(var(--r,-26deg));
  pointer-events:none;
}

/* sketch elements: static base (filled) for reduced-motion and no-JS */
.mark-draw path{fill:currentColor}
.draw-title text{
  fill:currentColor;
  font-family:var(--din-c);font-weight:700;font-size:104px;letter-spacing:.04em;
}

/* fleet chips in The Lab section */
.fleet-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.fleet-row a{text-decoration:none;color:inherit}
.fleet-row .codebox{font-size:16px;padding:3px 15px;transition:transform .18s ease,opacity .18s ease}
.fleet-row a:hover .codebox{transform:translateY(-2px);opacity:.85}

/* ---------- project hero pages ---------- */
.page-hero{
  min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--nav-h) + 60px) 24px 60px;position:relative;overflow:hidden;
}
.meta-row{
  display:flex;gap:34px;flex-wrap:wrap;justify-content:center;align-items:center;
  margin-top:30px;
}
.meta{display:flex;flex-direction:column;gap:6px;align-items:center}
.meta .k{font-family:var(--din-a);font-weight:700;font-size:10px;letter-spacing:.34em;color:var(--dim);text-transform:uppercase}
.meta .v{font-family:var(--din-c);font-weight:700;font-size:26px;letter-spacing:.12em;text-transform:uppercase}

/* content strips on subpages */
.strip{
  border-top:1px solid var(--line);
  padding:88px 24px;
}
.strip .inner{max-width:920px;margin:0 auto;display:grid;grid-template-columns:220px 1fr;gap:40px;text-align:left}
.strip h3{
  font-family:var(--din-a);font-weight:700;font-size:12px;letter-spacing:.4em;
  text-transform:uppercase;color:var(--dim);margin:6px 0 0;
}
.strip p{margin:0;color:#C9C9C9;max-width:62ch}
.strip.light{background:var(--paper);color:var(--black);border-top:1px solid var(--line-light)}
.strip.light p{color:#4A4A4A}
@media (max-width:700px){.strip .inner{grid-template-columns:1fr;gap:12px}}

/* ============================================================
   PROJECT THEMES — each unit keeps its own visual identity
   ============================================================ */

/* ----- Monori: warm parchment / ember (monori.app) ----- */
.section.monori{background:#13100D;color:#F0E8DC}
.section.monori .display{
  font-family:"DM Serif Display",Georgia,"Times New Roman",serif;
  font-weight:400;text-transform:none;letter-spacing:0;line-height:1.02;
}
.section.monori .label{color:#C9713A}
.section.monori .tagline{color:#C7B9A6}
.section.monori .btn{border-radius:14px;color:#F0E8DC}
.section.monori .btn.solid{background:#C9713A;border-color:#C9713A;color:#FFFFFF}

.theme-monori{background:#13100D;color:#F0E8DC}
.theme-monori .page-hero h1.display{
  font-family:"DM Serif Display",Georgia,serif;
  font-weight:400;text-transform:none;letter-spacing:0;
}
.theme-monori .label{color:#C9713A}
.theme-monori .tagline{color:#C7B9A6}
.theme-monori .meta .k{color:#9A8A78}
.theme-monori .meta .v{font-family:"DM Serif Display",Georgia,serif;font-weight:400;letter-spacing:.04em}
.theme-monori .btn{border-radius:14px;color:#F0E8DC}
.theme-monori .btn.solid{background:#C9713A;border-color:#C9713A;color:#FFFFFF}
.theme-monori .strip{border-top-color:rgba(240,232,220,.09)}
.theme-monori .strip h3{color:#9A8A78}
.theme-monori .strip p{color:#C7B9A6}

/* ----- Gasify: purple stage / Outfit / CRT (gasify.app) ----- */
.section.gasify{background:#6C63FF;color:#FFFFFF}
.section.gasify::before,.theme-gasify .page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.36) 100%);
}
.section.gasify::after,.theme-gasify .page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
}
.section.gasify>*,.theme-gasify .page-hero>*{position:relative;z-index:2}
.section.gasify .display,.theme-gasify .display{
  font-family:"Outfit",-apple-system,sans-serif;font-weight:900;letter-spacing:.02em;
}
.section.gasify .label{color:#E4E1FF}
.section.gasify .tagline{color:#EFEDFF}
.section.gasify .btn{color:#fff}
.section.gasify .btn.solid{background:#000;border-color:#000;color:#fff}

.theme-gasify{background:#08080C;color:#EEEEF0}
.theme-gasify .page-hero{background:#6C63FF;color:#fff}
.theme-gasify .label{color:#E4E1FF}
.theme-gasify .page-hero .tagline{color:#EFEDFF}
.theme-gasify .meta .k{color:#D6D2FF}
.theme-gasify .meta .v{font-family:"Outfit",sans-serif;font-weight:800}
.theme-gasify .btn{color:#fff}
.theme-gasify .btn.solid{background:#000;border-color:#000;color:#fff}
.theme-gasify .strip{border-top-color:rgba(108,99,255,.18)}
.theme-gasify .strip h3{color:#9B8FFF}
.theme-gasify .strip p{color:#8E8EA0}

/* ---------- mobile polish ---------- */
@media (max-width:640px){
  .section{padding:calc(var(--nav-h) + 40px) 20px 56px;min-height:100svh}
  .section.half{min-height:64svh}
  .section h1.display{font-size:clamp(40px,12.5vw,58px)}
  .section h2.display{font-size:clamp(34px,11vw,46px)}
  .page-hero{padding:calc(var(--nav-h) + 44px) 20px 48px;min-height:82svh}
  .page-hero h1.display{font-size:clamp(44px,16vw,64px) !important}
  .meta-row{gap:20px 30px}
  .meta .v{font-size:21px}
  .btn{padding:10px 20px;font-size:12px;letter-spacing:.18em}
  .codebox{font-size:17px;padding:2px 13px}
  .strip{padding:60px 20px}
  .footer .inner{justify-content:center;text-align:center}
  .footer .cols{gap:20px;justify-content:center}
  .footer .fine{justify-content:center;text-align:center;gap:10px;flex-direction:column;align-items:center}
}

/* ----- Estudio Web (Mexico only) ----- */
.btn.wa{
  background:#25D366;border-color:#25D366;color:#fff;
  display:inline-flex;align-items:center;gap:10px;
}
.btn.wa svg{width:17px;height:17px;flex:none;fill:currentColor}
.btn.wa:hover{opacity:.92}

.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:18px;max-width:1024px;margin:44px auto 0;text-align:left;
}
.step{
  background:var(--panel);border:1px solid var(--line);
  padding:28px 26px;display:flex;flex-direction:column;gap:10px;
}
.step .n{
  font-family:var(--din-c);font-weight:700;font-size:46px;line-height:1;
  color:var(--white);
}
.step h4{
  margin:0;font-family:var(--din-a);font-weight:700;font-size:12px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
}
.step p{margin:0;font-size:14px;line-height:1.6;color:#B9B9B9}

/* lists inside strips (brand/trademark page) */
.strip ul{margin:0;padding-left:20px;color:#C9C9C9}
.strip li{margin:7px 0}

/* footer legal link + language switcher */
.footer .fine a{
  font-family:var(--din-a);font-weight:700;font-size:10px;letter-spacing:.28em;
  color:var(--dim);text-transform:uppercase;text-decoration:none;
}
.footer .fine a:hover{color:var(--white)}
.footer .langs{display:inline-flex;gap:10px;align-items:center}
.footer .lang-now{
  font-family:var(--din-a);font-weight:700;font-size:10px;letter-spacing:.28em;
  color:var(--white);text-transform:uppercase;
}

/* cookie notice */
.cookie-note{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  max-width:520px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(18,18,18,.96);border:1px solid var(--line);border-radius:14px;
  padding:14px 18px;color:#C9C9C9;font-size:12.5px;line-height:1.5;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.cookie-note button{
  flex:none;cursor:pointer;
  background:var(--white);color:var(--black);border:0;border-radius:980px;
  font-family:var(--din-a);font-weight:700;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding:9px 18px;
}

/* ---------- footer (rendered by <sw-footer>) ---------- */
.footer{
  border-top:1px solid var(--line);
  background:var(--black);color:var(--white);
  padding:54px 24px 44px;
}
.footer .inner{
  max-width:1024px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
}
.footer img{height:30px;width:auto}
.footer .cols{display:flex;gap:34px;flex-wrap:wrap}
.footer a{
  font-family:var(--din-a);font-weight:700;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:#C9C9C9;text-decoration:none;
}
.footer a:hover{color:var(--white)}
.footer .fine{width:100%;margin-top:26px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer .fine span{font-family:var(--din-a);font-size:10px;letter-spacing:.28em;color:var(--faint);text-transform:uppercase}