/* ============================================================
   GLASS KITE — a universe of glass
   Design tokens + glass system + layout
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;600;700;800&family=Space+Grotesk:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* void */
  --bg:        #05060a;
  --bg-2:      #090b14;
  --ink:       #f3f5ff;
  --muted:     rgba(243,245,255,.58);
  --faint:     rgba(243,245,255,.34);
  --hair:      rgba(243,245,255,.10);
  --hair-2:    rgba(243,245,255,.16);

  /* prism — oil-slick spectrum */
  --c-mag:  #ff2d9b;
  --c-vio:  #b14bff;
  --c-blu:  #4d7cff;
  --c-cyn:  #38e0ff;
  --c-mnt:  #3dffce;
  --c-lim:  #c8ff63;
  --c-gld:  #ffd24d;
  --c-amb:  #ff7a4d;

  --iris: conic-gradient(from var(--iris-from,200deg) at 50% 50%,
            #b14bff, #6a8bff, #4d7cff, #38e0ff, #9fd8ff, #38e0ff, #4d7cff, #6a8bff, #b14bff);
  /* blue text gradient — matches the “enter the gallery” button */
  --text-grad: linear-gradient(120deg, var(--c-vio), var(--c-blu) 55%, var(--c-cyn));

  --glass-fill:   rgba(255,255,255,.045);
  --glass-fill-2: rgba(255,255,255,.075);
  --glass-stroke: rgba(255,255,255,.14);

  --shadow: 0 40px 80px -28px rgba(0,0,0,.85);

  --maxw: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:300;
  line-height:1.55;
  letter-spacing:.01em;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:820px){ body{ cursor:auto } }

::selection{ background:rgba(177,75,255,.4); color:#fff }

a{ color:inherit; text-decoration:none }
img,svg{ display:block }

/* ---------- atmosphere layers (fixed) ---------- */
.atmos{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }

/* drifting prism orbs that give the glass its colour */
.orb{
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.5; mix-blend-mode:screen;
  will-change:transform;
}
.orb.a{ width:46vw; height:46vw; left:-8vw; top:-6vw;
  background:radial-gradient(circle at 30% 30%, var(--c-blu), transparent 62%); }
.orb.b{ width:52vw; height:52vw; right:-12vw; top:8vw;
  background:radial-gradient(circle at 60% 40%, var(--c-blu), transparent 62%); opacity:.42 }
.orb.c{ width:42vw; height:42vw; left:24vw; top:62vh;
  background:radial-gradient(circle at 50% 50%, var(--c-cyn), transparent 60%); opacity:.32 }
.orb.d{ width:38vw; height:38vw; right:6vw; bottom:-10vh;
  background:radial-gradient(circle at 50% 50%, var(--c-vio), transparent 60%); opacity:.4 }

/* constellation canvas */
#sky{ position:fixed; inset:0; z-index:1; pointer-events:none }

/* film grain */
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* subtle top/bottom vignette so text stays legible */
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, transparent 40%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 18%, transparent 78%, rgba(0,0,0,.55) 100%);
}

/* cursor spotlight + custom cursor */
.spot{
  position:fixed; z-index:3; inset:0; pointer-events:none;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),
    rgba(120,150,255,.10), rgba(120,150,255,.04) 40%, transparent 70%);
  mix-blend-mode:screen;
}
.cursor{ position:fixed; z-index:60; top:0; left:0; pointer-events:none; will-change:transform }
.cur-shape{
  position:relative; width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
  border:1.5px solid rgba(178,208,255,.92); border-radius:2px;
  box-shadow:0 0 12px rgba(120,170,255,.55);
  transform:rotate(45deg);
  transition:transform .18s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.cur-shape::after{ content:''; position:absolute; left:50%; top:50%;
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px; border-radius:50%;
  background:rgba(222,236,255,.95); box-shadow:0 0 6px rgba(150,190,255,.9) }
.cursor.link .cur-shape{ transform:rotate(45deg) scale(.5); background:rgba(178,208,255,.95); border-color:transparent }
.cursor.card .cur-shape{ transform:rotate(45deg) scale(1.85); border-color:rgba(120,170,255,.85);
  box-shadow:0 0 22px rgba(120,170,255,.45) }
@media (max-width:820px){ .cursor,.spot{ display:none } }

/* ---------- shell ---------- */
.shell{ position:relative; z-index:4 }
.wrap{ width:min(var(--maxw), 92vw); margin-inline:auto }

/* ---------- glass primitive ---------- */
.glass{
  position:relative;
  background:linear-gradient(160deg, var(--glass-fill-2), var(--glass-fill));
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--glass-stroke);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.4),
    var(--shadow);
}
/* iridescent hairline edge */
.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--iris); opacity:.0;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity .5s var(--ease);
}
.glass:hover::before{ opacity:.55 }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,4vw,44px);
  transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(5,6,10,.55);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--hair);
}
.brand{ display:flex; align-items:center; gap:12px; font-family:'Syne',sans-serif }
.brand .mark{ width:30px; height:34px; flex:none }
.brand .name{
  font-weight:800; font-size:19px; letter-spacing:.14em; text-transform:uppercase;
}
.brand .name b{
  background:var(--text-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.navlinks{ display:flex; align-items:center; gap:6px }
.navlinks a{
  position:relative; font-size:13px; letter-spacing:.04em; color:var(--muted);
  padding:9px 14px; border-radius:999px; transition:color .3s;
}
.navlinks a:hover{ color:var(--ink) }
.navlinks a.cta{
  color:var(--ink); border:1px solid var(--hair-2);
  background:rgba(255,255,255,.04);
}
.navlinks a.cta:hover{ border-color:rgba(177,75,255,.6) }
.mono{ font-family:'JetBrains Mono',monospace }
@media (max-width:680px){ .navlinks a:not(.cta){ display:none } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:grid; place-items:center; grid-template-columns:minmax(0,1fr); text-align:center;
  padding:120px 0 80px;
}
.hero-inner{ position:relative; z-index:2; width:100%; max-width:880px; margin-inline:auto; min-width:0; padding-inline:18px }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint);
  padding:8px 16px; border:1px solid var(--hair); border-radius:999px;
  margin-bottom:30px; background:rgba(255,255,255,.02);
}
.eyebrow .pip{ width:6px; height:6px; border-radius:50%; background:var(--c-cyn);
  box-shadow:0 0 12px var(--c-cyn); }

.hero h1{
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(30px, calc((100vw - 40px) / 9), 138px); line-height:.9; letter-spacing:-.02em;
  text-transform:uppercase;
}
.hero h1 .l1{ display:block; color:#fff }
.hero h1 .l2{
  display:block;
  background:var(--text-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 30px rgba(77,124,255,.4));
}
.hero p.lede{
  margin:26px auto 0; max-width:560px; font-size:clamp(16px,2vw,19px);
  color:var(--muted); font-weight:300; text-wrap:balance;
}
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px }
@media (max-width:600px){
  .hero{ padding:100px 0 70px }
  .hero h1{ line-height:.98; overflow-wrap:normal; word-break:normal; hyphens:none }
  .eyebrow{ flex-wrap:wrap; justify-content:center; max-width:100%; text-align:center;
       font-size:10px; letter-spacing:.14em; margin-bottom:24px }
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; letter-spacing:.02em; padding:14px 24px; border-radius:999px;
  border:1px solid var(--hair-2); color:var(--ink);
  background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
  will-change:transform;
}
.btn:hover{ border-color:rgba(255,255,255,.4); box-shadow:0 0 30px -6px rgba(120,170,255,.5) }
.btn.primary{
  border:none; isolation:isolate;
  background:linear-gradient(95deg, #c640ff 0%, #a948ff 38%, #7d6bff 72%, #46c8ff 100%);
  color:#0a0a14; font-weight:600;
  box-shadow:0 16px 40px -14px rgba(150,70,255,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover{ border:none; box-shadow:0 18px 48px -12px rgba(150,70,255,.8), inset 0 1px 0 rgba(255,255,255,.45) }
.btn .arrow{ transition:transform .3s var(--ease) }
.btn:hover .arrow{ transform:translateX(4px) }

.scrollcue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em;
  color:var(--faint); text-transform:uppercase; z-index:2;
}
.scrollcue .rail{ width:1px; height:46px; background:linear-gradient(var(--faint), transparent);
  position:relative; overflow:hidden }
.scrollcue .rail::after{ content:''; position:absolute; left:0; top:-50%; width:1px; height:50%;
  background:linear-gradient(transparent,#fff); animation:fall 2.2s var(--ease) infinite }
@keyframes fall{ to{ top:120% } }

/* the kite — sits behind the headline, parallax/tilt via JS */
.kite-stage{
  position:absolute; inset:0; z-index:1; display:grid; place-items:center;
  perspective:1400px; pointer-events:none;
}
.kite{
  position:relative; width:min(560px,72vw); aspect-ratio:1/1.18;
  transform-style:preserve-3d; will-change:transform;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .15s linear;
  opacity:.92;
}
.kite svg{ width:100%; height:100%; overflow:visible }
.facet{ transition:opacity .6s var(--ease) }
/* sweeping glare */
.kite .glare{ mix-blend-mode:screen; opacity:.9 }
.kite-glow{
  position:absolute; inset:-12% ; z-index:-1; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(177,75,255,.32), rgba(77,124,255,.16) 42%, transparent 68%);
  filter:blur(20px);
}
/* tail */
.tail{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none }

/* ============================================================
   SECTION CHROME
   ============================================================ */
.section{ position:relative; padding:clamp(80px,12vh,150px) 0 }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:48px }
.sec-kicker{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--c-cyn); display:flex; align-items:center; gap:12px;
}
.sec-kicker::before{ content:''; width:34px; height:1px; background:var(--c-cyn); opacity:.6 }
.sec-head h2{
  font-family:'Syne',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(32px,5vw,58px); line-height:1; margin-top:14px; text-wrap:balance;
}
.sec-head .lead{ max-width:380px; color:var(--muted); font-size:15px }

/* ---------- project grid ---------- */
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px }
.card{
  grid-column:span 4; border-radius:22px; padding:26px;
  min-height:300px; display:flex; flex-direction:column; justify-content:space-between;
  transform-style:preserve-3d; will-change:transform;
  transition:transform .25s var(--ease), box-shadow .4s var(--ease);
  cursor:pointer; overflow:hidden;
}
.card.wide{ grid-column:span 6 }
@media (max-width:980px){ .card,.card.wide{ grid-column:span 6 } }
@media (max-width:620px){ .card,.card.wide{ grid-column:span 12 } }

.card:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 50px 90px -30px rgba(0,0,0,.9),
  0 0 60px -20px rgba(120,150,255,.4) }
/* moving glare inside card */
.card .sheen{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(360px 360px at var(--gx,50%) var(--gy,0%),
    rgba(255,255,255,.16), transparent 60%);
}
.card:hover .sheen{ opacity:1 }
.card-top{ display:flex; align-items:center; justify-content:space-between; transform:translateZ(28px) }
.tag{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint);
  border:1px solid var(--hair); border-radius:999px; padding:6px 11px; white-space:nowrap;
}
.idx{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--faint) }
.glyph{ width:62px; height:62px; transform:translateZ(46px) }
.card h3{ font-family:'Syne',sans-serif; font-weight:600; font-size:25px; letter-spacing:-.01em;
  transform:translateZ(34px); margin-top:auto }
.card p{ color:var(--muted); font-size:14px; margin-top:8px; transform:translateZ(24px); max-width:34ch }
.card .launch{
  margin-top:20px; display:inline-flex; align-items:center; gap:9px;
  font-size:13px; color:var(--ink); transform:translateZ(30px);
  opacity:.75; transition:opacity .3s, gap .3s;
}
.card:hover .launch{ opacity:1; gap:14px }
.card .launch .dot{ width:7px; height:7px; border-radius:50%; background:var(--c-cyn);
  box-shadow:0 0 10px var(--c-cyn) }

/* ---------- about ---------- */
.about{ display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:stretch }
@media (max-width:880px){ .about{ grid-template-columns:1fr } }
.about-copy{ padding:clamp(28px,4vw,46px); border-radius:26px; display:flex; flex-direction:column; gap:22px }
.about-copy .big{ font-family:'Syne',sans-serif; font-weight:600; font-size:clamp(22px,3vw,30px);
  line-height:1.25; letter-spacing:-.01em; text-wrap:balance }
.about-copy .big em{ font-style:normal;
  background:var(--text-grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.about-copy p{ color:var(--muted); font-size:15px; max-width:52ch }
.stats{ display:flex; gap:30px; flex-wrap:wrap; margin-top:6px }
.stat .n{ font-family:'Syne',sans-serif; font-weight:700; font-size:30px;
  background:var(--text-grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.stat .k{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint) }
/* about visual: rotating glass shard cluster */
.about-vis{ position:relative; border-radius:26px; overflow:hidden; min-height:340px;
  display:grid; place-items:center }
.about-vis .shardfield{ position:absolute; inset:0 }
.about-vis .label{ position:absolute; left:22px; bottom:20px; font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.16em; color:var(--faint); text-transform:uppercase; z-index:2 }

/* ---------- contact ---------- */
.contact{ text-align:center; padding:clamp(60px,9vw,110px) clamp(24px,5vw,70px);
  border-radius:30px; position:relative; overflow:hidden }
.contact h2{ font-family:'Syne',sans-serif; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(34px,6vw,68px); line-height:.98; text-wrap:balance }
.contact h2 em{ font-style:normal;
  background:var(--text-grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.contact p{ color:var(--muted); max-width:480px; margin:20px auto 34px; font-size:16px }
.contact .links{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.maillink{ display:inline-flex; align-items:center; gap:12px; font-family:'JetBrains Mono',monospace;
  font-size:clamp(15px,2.6vw,22px); letter-spacing:.02em; color:var(--ink);
  padding:14px 22px; border:1px solid var(--hair-2); border-radius:999px;
  transition:border-color .3s, background .3s }
.maillink:hover{ border-color:rgba(56,224,255,.6); background:rgba(56,224,255,.06) }

/* ---------- footer ---------- */
.foot{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; padding:40px 0 60px; border-top:1px solid var(--hair); margin-top:80px }
.foot .mono{ font-size:12px; color:var(--faint); letter-spacing:.06em }
.foot .social{ display:flex; gap:18px }
.foot .social a{ font-size:13px; color:var(--muted); transition:color .3s }
.foot .social a:hover{ color:var(--ink) }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
[data-reveal].in{ opacity:1; transform:none }
[data-reveal][data-d="1"]{ transition-delay:.08s }
[data-reveal][data-d="2"]{ transition-delay:.16s }
[data-reveal][data-d="3"]{ transition-delay:.24s }
[data-reveal][data-d="4"]{ transition-delay:.32s }
[data-reveal][data-d="5"]{ transition-delay:.4s }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  [data-reveal]{ opacity:1; transform:none }
}