/* ==========================================================================
   Hat Invasion — hatinvasion.com
   Colours, type and layout are matched to the approved two-panel comp.
   ========================================================================== */

@font-face{
  font-family:'Baloo 2';
  src:url('/media/baloo2-latin-var.woff2') format('woff2');
  font-weight:400 800;
  font-display:swap;
}

:root{
  --sky-1:#0063C3;
  --sky-2:#0B93E0;
  --sky-3:#16A6EC;
  --cream:#F3E5CB;
  --navy:#050C24;
  --navy-2:#0A1533;
  --cta-blue:#3F7EC9;
  --purple:#4C3B74;
  --purple-dk:#2F2450;
  --yellow:#F8C018;
  --type-cream:#F1E3D0;
  --ink:#4E3922;
  --lilac:#A99AC2;

  --pad-y:clamp(3.6rem, 8.5vw, 7.2rem);
  --gutter:clamp(1.15rem, 4vw, 2.5rem);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  overflow-x:clip;
  background:var(--cream);
  color:var(--ink);
  font-family:'Baloo 2',ui-rounded,'SF Pro Rounded','Segoe UI',system-ui,sans-serif;
  font-weight:500;
  line-height:1.34;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;border:0}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:#fff;color:#000;padding:.7rem 1.1rem;border-radius:0 0 .6rem 0;font-weight:700;
}
.skip:focus{left:0}

:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px }

/* ── shared shell ────────────────────────────────────────────────────── */

.band{
  position:relative;
  overflow:hidden;
  padding-block:var(--pad-y);
  isolation:isolate;
}

.wrap{
  width:min(100% - (var(--gutter) * 2), 1180px);
  margin-inline:auto;
  position:relative;
  z-index:2;
}

.split{
  display:grid;
  gap:clamp(2.2rem,5vw,4rem);
  align-items:center;
}
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.4rem) }
  /* the comp panels are tight — don't let the art drift into dead space */
  .wrap.split{ width:min(100% - (var(--gutter) * 2),1064px) }
}

.art{ display:flex; justify-content:center; position:relative }

/* ── type ────────────────────────────────────────────────────────────── */

.display,.head{
  margin:0;
  font-weight:800;
  line-height:.98;
  letter-spacing:-.005em;
  text-wrap:balance;
}

.head{
  font-size:clamp(2.35rem,7vw,4.5rem);
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:.95;
}

.display{ font-size:clamp(2rem,5.9vw,3.85rem) }
.display .l1,.display .l2{ display:block }
.display .l1{ color:var(--type-cream) }
.display .l2{ color:var(--yellow) }

.ink-purple{
  color:var(--purple);
  text-shadow:0 .035em 0 rgba(47,36,80,.55), 0 .075em .1em rgba(47,36,80,.28);
}
.ink-cream{
  color:var(--type-cream);
  text-shadow:0 .035em 0 rgba(0,0,0,.34), 0 .085em .14em rgba(0,0,0,.4);
}
.display{ text-shadow:0 .04em 0 rgba(0,40,80,.32), 0 .085em .16em rgba(0,35,70,.35) }

.lede,.sub{ margin:1.05rem 0 0; font-weight:600 }
.lede{ font-size:clamp(1rem,2.3vw,1.3rem); color:var(--type-cream); text-shadow:0 1px 3px rgba(0,40,80,.4) }
.sub{ font-size:clamp(1.03rem,2.4vw,1.42rem); color:var(--ink); max-width:34ch }
.sub-cream{ color:#EBDCC4; text-shadow:0 1px 4px rgba(0,0,0,.55) }
.sub-lilac{ color:var(--lilac) }

/* ── App Store badge ─────────────────────────────────────────────────── */

.badge{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:clamp(1.3rem,3vw,1.9rem);
  padding:.55rem 1.15rem .6rem .95rem;
  background:#0B0B0D;
  color:#fff;
  border-radius:.85rem;
  box-shadow:0 .5rem 1.4rem rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.12);
}
.badge-apple{ width:clamp(28px,4.4vw,36px); height:auto; fill:#fff; flex:none }
.badge-text{ display:flex; flex-direction:column; line-height:1.06; text-align:left }
.badge-text small{ font-size:clamp(.66rem,1.5vw,.82rem); font-weight:600; opacity:.94 }
.badge-text strong{ font-size:clamp(1.12rem,2.6vw,1.5rem); font-weight:700; letter-spacing:-.01em }

/* ── phone mock-up ───────────────────────────────────────────────────── */

.phone{
  --pw:clamp(206px,44vw,292px);
  width:var(--pw);
  aspect-ratio:430/932;
  flex:none;
  padding:calc(var(--pw) * .026);
  border-radius:calc(var(--pw) * .157);
  background:linear-gradient(148deg,#585C66 0%,#24262C 26%,#43464F 58%,#1B1D22 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.45),
    0 1.4rem 2.8rem rgba(0,0,0,.34),
    0 .35rem .9rem rgba(0,0,0,.24);
}
.phone-screen{
  position:relative;
  height:100%;
  border-radius:calc(var(--pw) * .132);
  overflow:hidden;
  background:#0A0A10;
}
.phone-screen>img{ width:100%; height:100%; object-fit:cover; display:block }
.phone-island{
  position:absolute; top:1.7%; left:50%; translate:-50% 0;
  width:30%; height:2.9%;
  background:#000; border-radius:99px;
}
.phone.tilt{ rotate:-5deg }

@media (min-width:900px){
  #maze .phone,#runs .phone{ --pw:clamp(214px,25vw,312px) }
}

/* ══ 1 · HERO ═══════════════════════════════════════════════════════════ */

.hero{
  background:linear-gradient(178deg,var(--sky-1) 0%,var(--sky-2) 58%,var(--sky-3) 100%);
  padding-top:clamp(2.4rem,5vw,3.9rem);
  padding-bottom:clamp(5.4rem,13vw,9.2rem);
}

.sky{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden }
.cloud{ position:absolute; opacity:.97 }

.hero .c1{ width:clamp(96px,13vw,180px); top:14%;  left:-3% }
.hero .c2{ width:clamp(104px,15vw,206px); top:3%;   left:39% }
.hero .c3{ width:clamp(88px,12vw,166px); top:24%;  right:12% }
.hero .c4{ width:clamp(120px,17vw,238px); top:-2%;  right:-4% }
.hero .c5{ width:clamp(80px,11vw,150px); top:41%;  right:1% }

.hero-grid{
  display:grid;
  gap:clamp(2.2rem,5vw,3rem);
  align-items:center;
}
@media (min-width:900px){
  .hero-grid{ grid-template-columns:1.06fr .94fr }
}

.hero-copy{ text-align:center }
@media (min-width:900px){ .hero-copy{ text-align:left } }

.logo{
  width:clamp(226px,46vw,352px);
  height:auto;
  margin:0 auto .55rem;
  display:block;
  filter:drop-shadow(0 1rem 1.6rem rgba(0,32,64,.34));
}
@media (min-width:900px){ .logo{ margin-inline:0 } }

.hero-art{ display:flex; justify-content:center }
.hero .phone{ --pw:clamp(200px,40vw,270px) }

.rubble{ position:absolute; inset:auto 0 0 0; height:clamp(64px,11vw,132px); z-index:1; pointer-events:none }
.rubble img{ position:absolute; bottom:-8% }
.rubble .r1{ left:-4%;  width:clamp(140px,23vw,300px) }
.rubble .r2{ right:-5%; width:clamp(168px,29vw,376px); bottom:-11% }
.rubble .r3{ left:37%;  width:clamp(112px,17vw,224px); bottom:-19% }

/* ══ 2 · 4 · PAPER BANDS ════════════════════════════════════════════════ */

.paper{ background:var(--cream) }
.paper::after{
  content:'';
  position:absolute; inset:0; z-index:0;
  background-image:var(--grain);
  opacity:.05;
  mix-blend-mode:multiply;
  pointer-events:none;
}

.copy{ text-align:center }
@media (min-width:900px){ .copy{ text-align:left } }
.copy .sub{ margin-inline:auto }
@media (min-width:900px){ .copy .sub{ margin-inline:0 } }

.blocks{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(.5rem,2vw,1.4rem);
  margin-top:clamp(1.6rem,4vw,2.6rem);
}
@media (min-width:900px){ .blocks{ justify-content:flex-start } }
.blocks img{ width:clamp(44px,8.5vw,86px) }
.blocks img:nth-child(1){ rotate:-8deg; translate:0 4%  }
.blocks img:nth-child(2){ rotate:6deg;  translate:0 12% }
.blocks img:nth-child(3){ rotate:-3deg }
.blocks img:nth-child(4){ rotate:11deg; translate:0 9%  }

.art-maze{ position:relative }
.art-maze .peek{
  position:absolute;
  z-index:0;
  width:clamp(104px,21vw,196px);
  right:-2%;
  bottom:8%;
}
@media (min-width:900px){ .art-maze .peek{ right:-6%; bottom:12% } }
.art-maze .phone{ position:relative; z-index:1 }

.cards{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(.45rem,1.8vw,1.1rem);
  margin-top:clamp(1.7rem,4vw,2.6rem);
}
@media (min-width:900px){ .cards{ justify-content:flex-start } }
.cards img{
  width:clamp(76px,16.5vw,146px);
  filter:drop-shadow(0 .7rem 1.1rem rgba(60,40,20,.26));
}
.cards .k1{ rotate:-9deg;  translate:0 6% }
.cards .k2{ rotate:-3deg }
.cards .k3{ rotate:8deg;   translate:0 4% }

/* ══ 3 · CLAY DESK ══════════════════════════════════════════════════════ */

.desk{ background:#1E140F; color:var(--type-cream) }

.desk-grid{ display:grid; gap:clamp(1.8rem,4vw,2.6rem) }

.desk-shot img{
  display:block;
  width:100%;
  border-radius:clamp(.7rem,2vw,1.1rem);
  box-shadow:0 1rem 2.4rem rgba(0,0,0,.5);
}

@media (min-width:900px){
  .desk{
    background-image:url('/media/art/desk.webp');
    background-size:cover;
    background-position:center right;
    min-height:min(74vh,660px);
    display:flex;
    align-items:center;
  }
  .desk::before{
    content:'';
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg,
      rgba(18,11,7,.93) 0%,
      rgba(18,11,7,.80) 30%,
      rgba(18,11,7,.30) 52%,
      rgba(18,11,7,0) 68%);
  }
  .desk .wrap{ width:min(100% - (var(--gutter) * 2),1180px) }
  .desk-grid{ grid-template-columns:minmax(0,.62fr) }
  .desk-shot{ display:none }
}

/* ══ 5 · NIGHT / THREE WORLDS ═══════════════════════════════════════════ */

.night{
  background:
    radial-gradient(ellipse 120% 80% at 50% 8%, var(--navy-2) 0%, var(--navy) 62%),
    var(--navy);
  color:var(--type-cream);
}
.night::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 27% 62%, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.7px 1.7px at 41% 12%, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 58% 47%, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 73% 22%, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 88% 68%, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 6% 78%, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 94% 38%, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 34% 88%, rgba(255,255,255,.65) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 66% 82%, rgba(255,255,255,.5) 50%, transparent 52%);
}

.space{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden }
.space .planet{ position:absolute; width:clamp(112px,19vw,258px); top:-6%; right:-5% }
.space .ast{ position:absolute }
.space .a1{ width:clamp(38px,6vw,80px);  top:9%;  left:5% }
.space .a2{ width:clamp(28px,4.4vw,58px); top:19%; left:14% }
.space .a3{ width:clamp(22px,3.4vw,44px); top:5%;  left:17% }

.night{ padding-bottom:clamp(5rem,13vw,9rem) }

.art-worlds{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:0;
}
.art-worlds .w-a{ rotate:-3deg; z-index:2; margin-right:calc(var(--pw) * -.20) }
.art-worlds .w-b{ rotate:4deg;  z-index:1; margin-top:clamp(.9rem,2.6vw,2.1rem) }
.art-worlds .phone{ --pw:clamp(158px,34vw,244px) }

.verge{ position:absolute; inset:auto 0 0 0; z-index:1; height:clamp(52px,9vw,116px); pointer-events:none }
.verge img{ position:absolute; bottom:-14% }
.verge .f1{ left:-3%;  width:clamp(128px,21vw,282px) }
.verge .f2{ right:-4%; width:clamp(140px,24vw,318px) }

/* on wide screens the phones sit in the right column — plant the grass
   under them rather than leaving it stranded in the far corner */
@media (min-width:900px){
  .night .verge .f1{ left:46% }
  .night .verge .f2{ right:-1% }
}

/* ══ 6 · CTA ════════════════════════════════════════════════════════════ */

.cta{
  background:var(--cta-blue);
  text-align:center;
  padding-bottom:clamp(8.5rem,20vw,15.5rem);
}
.cta::after{
  content:'';
  position:absolute; inset:0; z-index:0;
  background-image:var(--grain);
  opacity:.09;
  mix-blend-mode:multiply;
  pointer-events:none;
}

.cta .f-c1{ width:clamp(104px,16vw,214px); top:14%; left:-2% }
.cta .f-c2{ width:clamp(96px,14vw,190px); top:6%;  right:6% }
.cta .f-c3{ width:clamp(74px,11vw,148px); top:34%; right:-2% }
.cta .f-c4{ width:clamp(70px,10vw,138px); top:47%; left:6% }

.cta-inner{ display:flex; flex-direction:column; align-items:center }
.cta-logo{ width:clamp(212px,44vw,376px); margin:0 0 .35rem }
.cta-head{ font-size:clamp(1.95rem,6.4vw,4rem) }
.cta .badge{ margin-top:clamp(1.2rem,3vw,1.8rem) }

.cta-verge{ height:clamp(62px,11vw,140px) }
.cta-verge .f1{ left:-4%;  width:clamp(112px,19vw,250px) }
.cta-verge .f2{ right:-4%; width:clamp(124px,21vw,278px) }
.cta-verge .wave{
  position:absolute;
  left:50%; translate:-50% 0;
  bottom:-4%;
  width:clamp(78px,12.5vw,146px);
}

/* ══ footer ═════════════════════════════════════════════════════════════ */

.foot{
  background:#0A1533;
  color:#9FB0C9;
  text-align:center;
  padding:1.6rem var(--gutter);
  font-size:.92rem;
  font-weight:500;
}
.foot p{ margin:0 }

/* ── gentle drift, off for reduced motion ────────────────────────────── */

@media (prefers-reduced-motion:no-preference){
  .cloud{ animation:drift 18s ease-in-out infinite alternate }
  .hero .c2{ animation-duration:23s; animation-delay:-4s }
  .hero .c3{ animation-duration:26s; animation-delay:-9s }
  .hero .c4{ animation-duration:21s; animation-delay:-2s }
  .hero .c5{ animation-duration:29s; animation-delay:-13s }
  .cta .f-c2{ animation-duration:25s; animation-delay:-6s }
  .cta .f-c3{ animation-duration:28s; animation-delay:-11s }
  .cta .f-c4{ animation-duration:22s; animation-delay:-3s }
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(1.6vw,-.5vw,0) }
}