
:root{
  --e: cubic-bezier(.16,1,.3,1);
  --ink:#08090b;
  --blue:#276fb8;
  --blue-lift:#4f96d8;
  --silver:#c8c6c7;
  --gold:#bd9741;
  --gold-lift:#e0c184;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:clip; text-rendering:optimizeLegibility; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--blue); color:#fff; }

:focus-visible{ outline:2px solid var(--blue-lift); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:fixed; top:10px; left:10px; z-index:100;
  transform:translateY(-160%); transition:transform .3s var(--e);
  background:#fff; color:var(--ink); padding:.7rem 1.1rem; border-radius:3px;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
}
.skip-link:focus{ transform:none; }

.grain{ position:relative; }
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); background-size:140px 140px;
  opacity:.16; mix-blend-mode:overlay;
}

.gmd-photo{
  position:relative; overflow:hidden; background:#0c0e11;
  border-radius:2px;
}
.gmd-photo__img{ width:100%; height:100%; object-fit:cover; }
.gmd-photo__ph{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform-origin:center;
}
.gmd-photo__scan{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 80% at 50% 50%, #000 20%, transparent 100%);
}
.gmd-photo__tag{
  position:absolute; left:0; bottom:0; display:flex; align-items:center; gap:.55rem;
  margin:.9rem; padding:.42rem .7rem;
  font-family:"JetBrains Mono", monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.62); background:rgba(8,9,11,.5); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.1); border-radius:2px; line-height:1.3;
  max-width:min(90%, 34rem);
}
.gmd-photo__dot{ width:5px; height:5px; border-radius:50%; background:var(--gold-lift); flex:none; }

[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--e) var(--rd,0ms), transform .95s var(--e) var(--rd,0ms);
  will-change:opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; will-change:auto; }

.line-mask{ overflow:hidden; padding-bottom:.06em; }
.line-inner{
  transform:translateY(112%); opacity:0;
  transition:transform 1.25s var(--e) var(--d,0s), opacity 1s ease var(--d,0s);
}
.hero-piece{
  opacity:0; transform:translateY(18px);
  transition:opacity 1s var(--e) var(--d,0s), transform 1s var(--e) var(--d,0s);
}
.is-loaded .line-inner{ transform:none; opacity:1; }
.is-loaded .hero-piece{ opacity:1; transform:none; }

.hero-aurora{
  position:absolute; inset:-12%;
  background:
    radial-gradient(38% 34% at 22% 28%, rgba(189,151,65,.22), transparent 65%),
    radial-gradient(42% 38% at 76% 34%, rgba(39,111,184,.28), transparent 68%),
    radial-gradient(50% 40% at 50% 88%, rgba(27,77,128,.22), transparent 70%);
  filter:blur(26px);
  animation:auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%   { transform:translate3d(-2%, 1%, 0) scale(1); }
  50%  { transform:translate3d(2%, -2%, 0) scale(1.06); }
  100% { transform:translate3d(-1%, 2%, 0) scale(1.02); }
}

.scroll-dot{ position:relative; display:block; width:10px; height:10px; }
.scroll-dot i{
  position:absolute; inset:0; border-radius:50%; background:var(--blue-lift);
  animation:scrollPing 2.4s var(--e) infinite;
}
@keyframes scrollPing{
  0%,100%{ transform:scale(.55); opacity:1; }
  50%    { transform:scale(1); opacity:.35; }
}

.gmd-line{
  stroke-dasharray:var(--len,1);
  stroke-dashoffset:var(--len,1);
  stroke-linecap:round;
}
.hero-line__spark{ opacity:0; transition:opacity .6s ease; filter:drop-shadow(0 0 6px rgba(224,193,132,.8)); }
.hero-line__spark.is-live{ opacity:1; }

.vapor path{
  stroke-dasharray:120 460; stroke-dashoffset:120; opacity:0;
  stroke-width:1.4;
  animation:vaporRise 11s linear infinite;
  animation-delay:calc(var(--i) * -3.6s);
}
@keyframes vaporRise{
  0%   { stroke-dashoffset:180; opacity:0; }
  18%  { opacity:.5; }
  70%  { opacity:.28; }
  100% { stroke-dashoffset:-420; opacity:0; }
}

.day-sky{
  background:
    radial-gradient(120% 90% at 50% 110%, var(--c1,#0a0f16) 0%, transparent 60%),
    radial-gradient(90% 70% at calc(var(--p,0) * 100%) 18%, var(--c3,#276fb8) 0%, transparent 55%),
    linear-gradient(180deg, var(--c2,#1b2a3d) 0%, var(--c1,#0a0f16) 78%);
  opacity:.9;
}
.day-sun{
  background:radial-gradient(circle at calc(8% + var(--p,0) * 84%) calc(70% - sin(var(--p,0) * 3.14159) * 46%),
            rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 12%, transparent 34%);
}
.day-moment{
  position:absolute; left:0; right:0; bottom:clamp(1rem,3.5vh,2.5rem);
  opacity:0; transform:translateY(34px); pointer-events:none;
  transition:opacity .7s var(--e), transform .7s var(--e);
}
.day-moment.is-active{ opacity:1; transform:none; pointer-events:auto; }

.day-axis{ position:relative; height:64px; }
.day-axis__track{ position:absolute; left:0; right:0; top:9px; height:1px; background:rgba(255,255,255,.16); }
.day-axis__fill{
  position:absolute; left:0; top:9px; height:1px; width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg, var(--blue), var(--gold-lift));
}
.day-axis__cursor{
  position:absolute; top:9px; left:calc(var(--p,0) * 100%); transform:translate(-50%,-50%);
  width:22px; height:22px; display:grid; place-items:center;
}
.day-axis__cursor i{
  width:7px; height:7px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 0 18px 4px rgba(224,193,132,.45);
}
.day-axis__tick{
  position:absolute; top:0; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding-top:5px; cursor:pointer; background:none; border:0;
}
.day-axis__dot{ width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:#08090b; transition:all .4s var(--e); }
.day-axis__tick.is-active .day-axis__dot{ border-color:var(--gold-lift); background:var(--gold-lift); transform:scale(1.15); }
.day-axis__time{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,.45); transition:color .4s ease; }
.day-axis__name{ display:none; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.3); transition:color .4s ease; }
.day-axis__tick.is-active .day-axis__time{ color:#fff; }
.day-axis__tick.is-active .day-axis__name{ color:rgba(255,255,255,.6); }
@media (min-width:768px){ .day-axis__name{ display:block; } }

.phase-row{ transition:background-color .6s ease; }
.phase-row:hover{ background:linear-gradient(90deg, rgba(255,255,255,.03), transparent 70%); }

[data-flow]{ --flow-track:rgba(8,9,11,.14); --flow-color:var(--blue); }
[data-flow="family"]{ --flow-color:var(--gold); }
[data-flow] > *{ position:relative; }
[data-flow] > *::before,
[data-flow] > *::after{ content:""; position:absolute; left:4px; top:17px; bottom:-2rem; width:1px; }
[data-flow] > *::before{ background:var(--flow-track); }
[data-flow] > *::after{
  background:var(--flow-color); transform:scaleY(var(--seg,0)); transform-origin:top;
  transition:transform .35s linear;
}
[data-flow] > *:last-child::before,
[data-flow] > *:last-child::after{ display:none; }
@media (min-width:768px){
  [data-flow] > *::before,
  [data-flow] > *::after{ left:0; right:-2rem; top:14px; bottom:auto; width:auto; height:1px; }
  [data-flow] > *::after{ transform:scaleX(var(--seg,0)); transform-origin:left; }
}

.energy-node__dot,
.family-node__dot{
  position:absolute; left:0; top:6px; width:9px; height:9px; border-radius:50%;
  background:#f4f4f5; border:1px solid rgba(8,9,11,.25);
  transition:transform .5s var(--e), background-color .5s ease, box-shadow .5s ease;
}
.energy-node__dot{ background:#fff; box-shadow:0 0 0 1px rgba(8,9,11,.12); }
[data-flow] > .is-live .energy-node__dot{ background:var(--blue); box-shadow:0 0 0 4px rgba(39,111,184,.16); transform:scale(1.1); }
.family-node__dot{ background:var(--gold); }
@media (min-width:768px){
  .energy-node__dot, .family-node__dot{ top:10px; left:-4px; }
}
.family-node__dot{ background:#f2e6cd; }
[data-flow] > .is-live .family-node__dot{ background:var(--gold); box-shadow:0 0 0 4px rgba(189,151,65,.16); transform:scale(1.1); }

.flow-step__dot{
  position:absolute; left:-2.5rem; top:2.65rem; width:9px; height:9px; border-radius:50%;
  background:#08090b; border:1px solid rgba(255,255,255,.35); transition:all .5s var(--e);
}
@media (min-width:768px){ .flow-step__dot{ left:-4rem; top:3.1rem; } }
.flow-step.is-in .flow-step__dot{ background:var(--blue); border-color:var(--blue-lift); box-shadow:0 0 0 5px rgba(39,111,184,.14); }

.label-act{
  position:absolute; inset:0; opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--e), transform .7s var(--e); pointer-events:none;
}
.label-act.is-active{ opacity:1; transform:none; pointer-events:auto; }
.label-layer{ opacity:0; transition:opacity .8s var(--e), transform .8s var(--e); transform:translateY(14px) scale(.985); transform-origin:center; }
.label-layer.is-active{ opacity:1; transform:none; }
.label-tick{ display:flex; align-items:center; gap:.6rem; color:rgba(255,255,255,.3); transition:color .5s ease; }
.label-tick__bar{ display:block; width:28px; height:1px; background:currentColor; transition:width .6s var(--e), background-color .5s ease; }
.label-tick.is-active{ color:#fff; }
.label-tick.is-active .label-tick__bar{ width:52px; background:var(--gold-lift); }
.label-tick__text{ white-space:nowrap; }
@media (max-width:640px){ .label-tick__text{ display:none; } }

.eco-spoke{ transition:stroke-opacity .5s ease; }
.eco-node{ transition:r .5s var(--e), fill .5s ease, stroke .5s ease; }
.eco-ring{ transform-origin:50% 50%; animation:ecoSpin 44s linear infinite; }
@keyframes ecoSpin{ to{ transform:rotate(360deg); } }
.eco-label{
  position:absolute; transform:translate(-50%,-50%);
  font-family:Archivo, sans-serif; font-weight:600; font-size:clamp(.72rem,1.1vw,.92rem);
  letter-spacing:.03em; text-transform:uppercase; color:rgba(244,244,245,.78);
  white-space:nowrap; padding:.35rem .5rem; transition:color .45s ease, transform .55s var(--e);
  opacity:0;
}
.is-eco-in .eco-label{ opacity:1; transition:opacity .8s var(--e) calc(var(--i) * 90ms + 250ms), color .45s ease; }
.eco-label:hover{ color:var(--gold-lift); }
.eco-label.is-hot{ color:#fff; }

.brand-row a[aria-disabled="true"]{ pointer-events:none; opacity:.55; }

.site-header{
  color:#f4f4f5;
  transition:color .5s ease, background-color .5s ease, transform .5s var(--e);
}
.site-header[data-tone="light"]{ color:var(--ink); }
.site-header[data-scrolled="true"]{ background:rgba(8,9,11,.55); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); }
.site-header[data-tone="light"][data-scrolled="true"]{ background:rgba(255,255,255,.72); }
.site-header[data-hidden="true"]{ transform:translateY(-100%); }
.site-header__rule{ height:1px; background:currentColor; opacity:.12; }
.site-header__rule span{
  display:block; height:1px; width:calc(var(--sp,0) * 100%);
  background:linear-gradient(90deg, var(--blue), var(--gold)); opacity:0;
  transition:opacity .5s ease;
}
.site-header[data-scrolled="true"] .site-header__rule span{ opacity:1; }

.hdr-link{ position:relative; padding-bottom:3px; }
.hdr-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--e);
}
.hdr-link:hover::after{ transform:scaleX(1); transform-origin:left; }
.lang-link{ opacity:.45; transition:opacity .35s ease, color .35s ease; }
.lang-link:hover{ opacity:.9; }
.lang-link.is-active{ opacity:1; color:var(--blue-lift); }

.menu-burger{ position:relative; display:block; width:20px; height:12px; }
.menu-burger i{
  position:absolute; left:0; height:1px; background:currentColor; transition:all .5s var(--e);
}
.menu-burger i:nth-child(1){ top:2px; width:20px; }
.menu-burger i:nth-child(2){ top:9px; width:13px; }
button:hover > .menu-burger i:nth-child(2){ width:20px; }
.menu-burger.is-open i:nth-child(1){ top:6px; transform:rotate(45deg); }
.menu-burger.is-open i:nth-child(2){ top:6px; width:20px; transform:rotate(-45deg); }

#chapter-flag{ color:rgba(244,244,245,.55); mix-blend-mode:difference; transition:opacity .5s ease; opacity:0; }
#chapter-flag.is-visible{ opacity:1; }

.site-menu{ visibility:hidden; }
.site-menu.is-open{ visibility:visible; }
.site-menu__backdrop{
  background:rgba(8,9,11,.55); opacity:0; transition:opacity .7s var(--e);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.site-menu.is-open .site-menu__backdrop{ opacity:1; }

.site-menu__panel{
  position:absolute; inset:0 auto 0 0; display:flex; flex-direction:column;
  width:100%; background:#0b0d10;
  transform:translateX(-100%); transition:transform .85s var(--e);
  box-shadow:40px 0 90px rgba(0,0,0,.5);
}
@media (min-width:1024px){ .site-menu__panel{ width:46vw; min-width:540px; max-width:820px; } }
.site-menu.is-open .site-menu__panel{ transform:none; }

.site-menu__nav{ flex:1; overflow-y:auto; padding:2vh var(--gutter, clamp(1.25rem,5vw,6rem)) 2vh; -webkit-overflow-scrolling:touch; }
.site-menu__item{ border-bottom:1px solid rgba(255,255,255,.07); opacity:0; transform:translateY(16px); }
.site-menu.is-open .site-menu__item{
  opacity:1; transform:none;
  transition:opacity .6s var(--e) calc(var(--i) * 45ms + 200ms), transform .7s var(--e) calc(var(--i) * 45ms + 200ms);
}
.site-menu__item a{
  display:grid; grid-template-columns:2.6rem 1fr 1.4rem; align-items:baseline; gap:1rem;
  padding:clamp(.7rem,1.4vh,1.05rem) 0; color:#f4f4f5; text-decoration:none;
}
.site-menu__num{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.16em; color:rgba(255,255,255,.32); transition:color .45s ease; }
.site-menu__label{
  font-family:Archivo, sans-serif; font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.35rem, 2.6vw, 2.15rem); line-height:1.05;
  transition:color .45s ease, transform .6s var(--e);
}
.site-menu__arrow{ width:1.1rem; height:1.1rem; opacity:0; transform:translateX(-8px); transition:all .5s var(--e); align-self:center; }
.site-menu__item a:hover .site-menu__label,
.site-menu__item a:focus-visible .site-menu__label{ color:var(--gold-lift); transform:translateX(8px); }
.site-menu__item a:hover .site-menu__num{ color:var(--blue-lift); }
.site-menu__item a:hover .site-menu__arrow{ opacity:.8; transform:none; }
.site-menu__desc{ padding:0 0 .9rem; font-size:.82rem; line-height:1.5; color:rgba(255,255,255,.4); }

.site-menu__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.4rem clamp(1.25rem,5vw,6rem); border-top:1px solid rgba(255,255,255,.08);
}

.site-menu__stage{ background:#08090b; }
.site-menu__media{
  position:absolute; inset:0; opacity:0; transform:scale(1.03);
  transition:opacity 1s var(--e), transform 1.4s var(--e);
}
.site-menu__media.is-active{ opacity:1; transform:none; }
.site-menu__media .gmd-photo{ height:100%; width:100%; border-radius:0; }
.site-menu__stage::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,9,11,.85) 0%, rgba(8,9,11,.25) 45%, rgba(8,9,11,.6) 100%);
}
.site-menu__stagecopy{
  position:absolute; right:clamp(2rem,4vw,5rem); bottom:clamp(2rem,6vh,4rem); z-index:2;
  text-align:right; display:flex; justify-content:flex-end;
}

.topic-opt{ position:relative; cursor:pointer; }
.topic-opt span{
  display:inline-block; padding-bottom:5px; font-size:.92rem; color:rgba(244,244,245,.45);
  border-bottom:1px solid transparent; transition:color .4s ease, border-color .4s ease;
}
.topic-opt:hover span{ color:rgba(244,244,245,.8); }
.topic-opt input:checked + span{ color:#fff; border-color:var(--gold); }
.topic-opt input:focus-visible + span{ outline:2px solid var(--blue-lift); outline-offset:4px; }

.field{ position:relative; }
.field input, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.18);
  color:#fff; font-family:Barlow, sans-serif; font-size:1rem; padding:1.5rem 0 .65rem;
  transition:border-color .4s ease; resize:vertical;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--blue-lift); }
.field label{
  position:absolute; left:0; top:1.35rem; pointer-events:none;
  font-size:.95rem; color:rgba(244,244,245,.42);
  transition:transform .35s var(--e), font-size .35s var(--e), color .35s ease;
  transform-origin:left top;
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.35rem) scale(.72); color:rgba(244,244,245,.55);
}
.field.has-error input, .field.has-error textarea{ border-color:#c0553b; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.btn-primary{
  display:inline-flex; align-items:center; gap:.85rem;
  padding:1rem 1.9rem; border-radius:2px; border:1px solid transparent;
  background:#f4f4f5; color:var(--ink);
  font-family:Archivo, sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  transition:background-color .4s ease, color .4s ease, gap .4s var(--e), opacity .3s ease;
}
.btn-primary:hover{ background:var(--blue); color:#fff; gap:1.4rem; }
.btn-primary[disabled]{ opacity:.5; pointer-events:none; }
.form-status{
  margin-top:1.4rem; font-family:"JetBrains Mono",monospace; font-size:.76rem; letter-spacing:.06em;
  color:var(--gold-lift); opacity:0; transform:translateY(6px); transition:all .5s var(--e);
}
.form-status.is-visible{ opacity:1; transform:none; }
.form-status.is-error{ color:#e07a5f; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .line-inner, .hero-piece{ opacity:1 !important; transform:none !important; }
  .hero-aurora{ animation:none; }
  .gmd-line{ stroke-dashoffset:0 !important; }
  .site-menu__media.is-active{ transform:none; }
}

@media print{
  .site-header, .site-menu, #chapter-flag, .gmd-photo__scan{ display:none !important; }
  body{ background:#fff; color:#000; }
}
