@font-face{
  font-family:'KiwiSoda';
  src:url('../fonts/KiwiSoda.ttf') format('truetype');
  font-display:swap;
}
:root{
  --c-ink:      #0A0E1A;
  --c-midnight: #1B2A4E;
  --c-fog:      #3A5A8C;
  --c-cloud:    #8FA8C9;
  --c-milk:     #E8EEF7;
  --c-ember:    #D4A574;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:#0A0E1A; color:var(--c-milk); height:100%; overflow:hidden; }
body{
  font-family:'KiwiSoda',-apple-system,sans-serif;
  font-weight:300; font-size:16px; line-height:1.7;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }

/* full-screen canvas */
#bg{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* vignette on top of canvas for cinematic feel */
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(10,14,26,.55) 100%);
  mix-blend-mode:multiply;
}

/* ───── hint at first load ───── */
.hint{
  position:fixed; left:50%; bottom:5vh; transform:translateX(-50%);
  z-index:20; pointer-events:none;
  font-family:'KiwiSoda',serif; font-size:13px;
  letter-spacing:0.18em; text-transform:lowercase; opacity:0;
  color:var(--c-milk); text-shadow:0 1px 16px rgba(10,14,26,.6);
  animation:hintIn 1.6s var(--ease) 1.2s forwards, hintBreath 4s ease-in-out 3s infinite;
}
@keyframes hintIn   { to{ opacity:.5; } }
@keyframes hintBreath{ 0%,100%{opacity:.35;} 50%{opacity:.7;} }
.hint.gone{ opacity:0 !important; transition:opacity 1.2s var(--ease); animation:none; }

/* ───── altitude indicator (right) ───── */
.altitudes{
  position:fixed; right:max(24px,2.4vw); top:50%; transform:translateY(-50%);
  z-index:15;
  display:flex; flex-direction:column; align-items:flex-end; gap:22px;
}
.altitudes::before{
  content:""; position:absolute; right:5px; top:6px; bottom:6px;
  width:1px; background:linear-gradient(180deg, transparent, var(--c-milk) 20%, var(--c-milk) 80%, transparent);
  opacity:.18;
}
.alt{
  position:relative;
  display:flex; align-items:center; gap:14px;
  color:var(--c-milk); cursor:none; background:none; border:0; padding:0; font:inherit;
}
@media (hover:none){ .alt{ cursor:pointer; } }
.alt .name{
  font-family:'KiwiSoda',serif; font-size:13px;
  letter-spacing:0.04em; white-space:nowrap;
  opacity:0; transform:translateX(8px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  text-shadow:0 1px 14px rgba(10,14,26,.6);
}
.alt:hover .name, .alt.active .name{ opacity:.9; transform:none; }
.alt .dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--c-milk); opacity:.45;
  transition:all .9s var(--ease);
}
.alt.active .dot{
  width:9px; height:9px; opacity:1;
  box-shadow:0 0 18px rgba(232,238,247,.8);
}

/* ───── audio toggle ───── */
.audio-toggle{
  position:fixed; top:max(22px,2.2vw); right:max(22px,2.2vw);
  z-index:20;
  width:38px; height:38px; border-radius:50%;
  background:rgba(232,238,247,.06); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(232,238,247,.16);
  display:flex; align-items:center; justify-content:center;
  cursor:none; color:var(--c-milk);
  transition:background .6s var(--ease);
}
@media (hover:none){ .audio-toggle{ cursor:pointer; } }
.audio-toggle:hover{ background:rgba(232,238,247,.14); }
.audio-toggle svg{ width:18px; height:18px; }

/* ───── brand mark (top-left) ───── */
.brand{
  position:fixed; top:max(22px,2.2vw); left:max(22px,2.2vw);
  z-index:20;
  font-family:'KiwiSoda',serif; font-weight:300;
  font-size:18px; letter-spacing:0.04em;
  color:var(--c-milk); text-shadow:0 1px 16px rgba(10,14,26,.7);
  opacity:.85;
}

/* ───── overlay panel ───── */
.overlay{
  position:fixed; left:0; right:0; bottom:0;
  z-index:25;
  padding:5vh 8vw 7vh;
  background:linear-gradient(180deg, transparent 0%, rgba(10,14,26,.55) 35%, rgba(10,14,26,.85) 100%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transform:translateY(100%);
  opacity:0;
  pointer-events:none;
  transition:transform 1.4s var(--ease), opacity 1.0s var(--ease);
  max-height:78vh; overflow-y:auto;
  color:var(--c-milk);
}
.overlay.open{ transform:none; opacity:1; pointer-events:auto; }
.overlay::-webkit-scrollbar{ width:6px; }
.overlay::-webkit-scrollbar-thumb{ background:rgba(232,238,247,.18); border-radius:3px; }

.overlay-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2em; margin-bottom:3.5vh;
  border-bottom:1px solid rgba(232,238,247,.12);
  padding-bottom:2.4vh;
}
.overlay-eyebrow{
  font-family:'KiwiSoda',sans-serif; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase; opacity:.5;
  margin-bottom:0.6em;
}
.overlay-title{
  font-family:'KiwiSoda',serif; font-weight:300;
  font-size:clamp(28px,4vw,52px); line-height:1.1; letter-spacing:0.01em;
  max-width:22ch;
}
.close{
  align-self:flex-end;
  background:none; border:1px solid rgba(232,238,247,.25);
  color:var(--c-milk); padding:.7em 1.4em;
  border-radius:999px;
  font-family:'KiwiSoda',serif; font-size:13px;
  cursor:none;
  transition:background .5s var(--ease), border-color .5s var(--ease);
}
@media (hover:none){ .close{ cursor:pointer; } }
.close:hover{ background:rgba(232,238,247,.08); border-color:rgba(232,238,247,.45); }

.overlay-body{
  font-family:'KiwiSoda',serif; font-weight:300;
  font-size:clamp(16px,1.6vw,20px); line-height:1.65;
  max-width:62ch; opacity:.88;
}

/* video grid inside Cirrus overlay */
.vidgrid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.4em 2em; max-width:1100px;
  margin-top:1em;
}
@media (max-width:760px){ .vidgrid{ grid-template-columns:1fr; } }
.vidgrid a{
  display:block; color:inherit; text-decoration:none;
  padding:1.2em 0; border-top:1px solid rgba(232,238,247,.10);
  font-family:'KiwiSoda',serif; font-size:18px;
  line-height:1.3; opacity:.75;
  transition:opacity .6s var(--ease), transform .6s var(--ease), padding-left .6s var(--ease);
  cursor:none;
}
@media (hover:none){ .vidgrid a{ cursor:pointer; } }
.vidgrid a:hover{ opacity:1; padding-left:1em; }

/* ───── aurora — teaser only; the real gallery lives in aurora.html ───── */
.overlay.aurora-theme{
  background:linear-gradient(180deg, transparent 0%, rgba(10,20,18,.55) 35%, rgba(8,14,22,.90) 100%);
}
.overlay.aurora-theme .overlay-title{ color:#BFF3D6; text-shadow:0 0 40px rgba(110,231,183,.35); }
.overlay.aurora-theme .overlay-eyebrow{ color:#A78BFA; opacity:.75; }

/* horizon */
.horizon-email{
  display:inline-block;
  font-family:'KiwiSoda',serif; font-size:clamp(22px,2.4vw,32px); color:var(--c-milk);
  margin-bottom:1.6em;
  animation:pulse 4.8s var(--ease) infinite;
  text-decoration:none;
}
@keyframes pulse{ 0%,100%{opacity:.6;} 50%{opacity:1;} }
.horizon-links{ display:flex; gap:2.4em; margin-bottom:2em; }
.horizon-links a{
  display:flex; align-items:center; gap:.7em;
  color:inherit; text-decoration:none;
  font-family:'KiwiSoda',serif; font-size:14px;
  opacity:.65; transition:opacity .5s var(--ease);
  cursor:none;
}
@media (hover:none){ .horizon-links a{ cursor:pointer; } }
.horizon-links a:hover{ opacity:1; }
.horizon-links .star{
  width:6px; height:6px; border-radius:50%; background:var(--c-milk);
  box-shadow:0 0 14px rgba(232,238,247,.7);
}
.footer-tag{
  font-family:'KiwiSoda',sans-serif; font-size:11px;
  letter-spacing:0.22em; text-transform:uppercase; opacity:.4;
}
.footer-tag a{ color:inherit; text-decoration:none; cursor:none; border-bottom:1px solid rgba(232,238,247,.3); }
@media (hover:none){ .footer-tag a{ cursor:pointer; } }
.footer-tag a:hover{ opacity:1; border-color:rgba(232,238,247,.7); }

/* ───── custom cursor ───── */
.cursor, .trail{
  position:fixed; left:0; top:0; pointer-events:none;
  z-index:200; border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform,width,height,opacity;
}
.cursor{
  width:8px; height:8px; background:var(--c-milk);
  box-shadow:0 0 18px 4px rgba(232,238,247,.45), 0 0 38px 12px rgba(232,238,247,.18);
  transition:width .5s var(--ease), height .5s var(--ease), background .5s var(--ease);
}
.cursor.hover{
  width:28px; height:28px;
  background:rgba(232,238,247,.85);
  box-shadow:0 0 24px 6px rgba(232,238,247,.55), 0 0 60px 18px rgba(232,238,247,.20);
  mix-blend-mode:screen;
}
.cursor.drag{ width:18px; height:18px; background:rgba(232,238,247,.5); }
.trail{ width:6px; height:6px; background:rgba(232,238,247,.5); filter:blur(1px); }
@media (hover:none){ .cursor, .trail{ display:none; } }



/* ───── cloud hover label (screen-space) ───── */
.cloud-label{
  position:fixed; left:0; top:0; pointer-events:none; z-index:30;
  text-align:center;
  opacity:0;
  transform:translate(-50%, calc(-100% - 32px));
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.cloud-label.visible{
  opacity:1;
  transform:translate(-50%, calc(-100% - 26px));
}
.cl-eye{
  display:block;
  font-family:'KiwiSoda',sans-serif; font-size:10px;
  letter-spacing:0.28em; text-transform:uppercase;
  color:var(--c-milk); opacity:.42;
  margin-bottom:.55em;
}
.cl-name{
  display:block;
  font-family:'KiwiSoda',serif; font-weight:300;
  font-size:clamp(22px,2.2vw,30px); letter-spacing:0.01em;
  color:var(--c-milk); white-space:nowrap;
  text-shadow:0 2px 28px rgba(10,14,26,.8), 0 0 60px rgba(143,168,201,.38);
}