:root{
  --bg:#f4f1ea;
  --bg2:#ece7dc;
  --ink:#161310;
  --ink-soft:#5f5a4f;
  --line:#e0dacd;
  --accent:#ff5a3c;
  --radius:22px;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Geist Pixel",-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;
}
.display,.section-title,.brand,.foot-big{
  font-family:"Geist Pixel","Inter",sans-serif;
  font-weight:800;letter-spacing:-.02em;
}
.ital{font-family:"Geist Pixel",Georgia,serif;font-style:italic;font-weight:400}
a{color:inherit;text-decoration:none}

/* NAV */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(18px,4vw,44px);
  background:rgba(244,241,234,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.nav.scrolled{border-color:var(--line)}
.brand{font-size:25px;letter-spacing:-.03em}
.brand .dot{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:clamp(10px,2vw,26px);font-size:14px;font-weight:500}
.nav-links a{color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--ink)}

/* HERO — starboy style: giant staggered serif text, robot floating beside it */
.hero{
  position:relative;min-height:100svh;
  max-width:1440px;margin:0 auto;
  padding:clamp(24px,4vw,56px) clamp(18px,4vw,48px);
  display:flex;align-items:center;justify-content:flex-start;
  overflow:visible;
}
.hero-title{
  font-family:"Geist Pixel",Georgia,serif;font-weight:400;
  font-size:min(clamp(40px,7.4vw,116px),16svh);line-height:1.16;letter-spacing:-.02em;
  text-transform:none;position:relative;z-index:2;pointer-events:none;
}
.ht-line{display:block;min-height:1.12em}
.ht-indent1{padding-left:.75em}
.ht-indent2{padding-left:1.6em}
.ht-w{
  display:inline-block;transform:translateY(112%);
  animation:htRise .85s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:var(--d,.3s);
}
@keyframes htRise{to{transform:translateY(0)}}
/* typewriter caret for the hero headline */
.hero-title .caret{
  display:inline-block;width:.07em;height:.92em;vertical-align:-.12em;
  margin-left:.05em;background:#ffd75e;   /* Joy's pastel yellow */
  box-shadow:0 0 10px rgba(255,215,94,.7);
  animation:caretBlink .9s steps(1) infinite;
}
@keyframes caretBlink{0%,50%{opacity:1}51%,100%{opacity:0}}

.hero-photo{
  position:absolute;z-index:1;
  /* the PNG is a 1254px square with large transparent margins;
     robot itself sits at ~22–75% x, 15–86% y of the file */
  right:max(-6vw,-90px);top:50%;
  width:clamp(420px,58vw,860px);
  transform:translateY(-52%);
  animation:botIn 1s cubic-bezier(.2,.8,.25,1.05) both;
  animation-delay:.15s;
  filter:drop-shadow(0 50px 46px rgba(120,90,20,.22));
}
@keyframes botIn{
  from{opacity:0;transform:translateY(calc(-52% + 30px)) scale(.95)}
  to{opacity:1;transform:translateY(-52%) scale(1)}
}
.hero-photo img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hero-photo canvas{
  position:absolute;inset:0;width:100%;height:100%;
  /* clip exactly to the goggle screen pixels */
  -webkit-mask-image:url("assets/hero-screen-mask.png?v=3");
  mask-image:url("assets/hero-screen-mask.png?v=3");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  mix-blend-mode:screen;   /* keep the photographed screen's glare under the light */
  opacity:0;transition:opacity .9s ease;
}
.hero-photo canvas.on{opacity:1}
@media(max-width:900px){
  .hero{flex-direction:column;justify-content:center;gap:0;padding-top:12vh}
  .hero-photo{position:relative;right:auto;top:auto;transform:none;width:min(86vw,540px);margin-top:-6vh}
  @keyframes botIn{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:none}}
}

/* generic button (still used elsewhere) */
.btn{
  display:inline-block;padding:14px 26px;border-radius:999px;
  background:var(--ink);color:var(--bg);font-weight:600;font-size:15px;
  transition:transform .15s ease,background .2s;
}
.btn:hover{transform:translateY(-2px);background:var(--accent)}

/* MARQUEE */
.marquee{border-block:1px solid var(--line);background:var(--bg2);overflow:hidden;padding:14px 0}
.marquee-track{display:inline-block;white-space:nowrap;font-size:16px;font-weight:600;color:var(--ink-soft);animation:scroll 30s linear infinite}
.marquee-track span{padding-right:2ch}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* BANDS */
.band{max-width:var(--max);margin:0 auto;padding:clamp(32px,5vw,64px) clamp(18px,4vw,44px)}
.section-title{font-size:clamp(30px,5vw,60px);line-height:1.02;font-weight:800}
.section-sub{margin-top:22px;max-width:60ch;font-size:clamp(16px,1.6vw,20px);color:var(--ink-soft)}
.section-sub.small{font-size:16px;margin-top:16px}
.meet{text-align:center}
.meet .section-sub{margin-inline:auto}
.grid-head{margin-bottom:40px}
.grid-head.center{text-align:center}
.grid-head.center .section-sub{margin-inline:auto}

/* DUO — sadness hugging the left edge, anger diagonally lower-right, copy beside anger */
.duo{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:start;gap:clamp(8px,2vw,24px);
  padding-top:clamp(20px,4vw,60px);
  max-width:1440px;      /* match the hero stage */
  overflow-x:clip;
}
.duo-col{min-width:0}
.duo-bot{position:relative}
.duo-bot img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.duo-bot canvas{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  /* light is ADDED onto the photographed screen, so its reflections stay visible */
  mix-blend-mode:screen}
/* same rendered size as the hero robot */
.duo-sad,.duo-anger{width:clamp(420px,58vw,860px)}
.duo-sad{
  margin-left:max(-8vw,-180px);   /* hug (and slightly pass) the left edge */
  margin-top: -200px;
}
.duo-sad canvas{
  -webkit-mask-image:url("assets/landing_sad2-mask.png");
  mask-image:url("assets/landing_sad2-mask.png");
}
.duo-anger{
  justify-self:end;
  /* 1.2x the hero size — grown via the container so the face canvas
     and mask scale together with the photo */
  width:clamp(504px,69.6vw,1032px);
  margin-right:max(-8vw,-120px);  /* hug (and slightly pass) the right edge */
  margin-top:clamp(140px,26vw,400px);
}
.duo-anger canvas{
  -webkit-mask-image:url("assets/landing_anger2-mask.png");
  mask-image:url("assets/landing_anger2-mask.png");
}
.duo-copy{
  font-family:"Geist Pixel",Georgia,serif;font-weight:400;
  font-size:clamp(44px,7.2vw,110px);line-height:.88;letter-spacing:-.015em;
  text-transform:lowercase;
  margin-top:clamp(12px,5vw,0px);
  padding-left:clamp(4px,3vw,48px);
  line-height: 110px;
}
.duo-copy .dc-w{display:inline-block}
@media(max-width:640px){
  .duo{grid-template-columns:1fr}
  .duo-sad,.duo-anger{width:104%;margin:0 auto}
  .duo-anger{margin-top:12px}
  .duo-copy{padding-left:8px}
}

/* LINEUP */
.lineup-band{padding-top:clamp(12px,4vw,48px)}
.lineup{
  position:relative;width:100%;border-radius:28px;overflow:hidden;
  /* background:linear-gradient(180deg,#faf8f3,#efe9dd); */
  /* box-shadow:0 50px 90px -50px rgba(0,0,0,.4); */
}
.lineup img{display:block;width:100%;height:auto}
.lineup canvas{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  /* -webkit-mask-image:url("assets/mumu-lineup2-mask.png"); */
  /* mask-image:url("assets/mumu-lineup2-mask.png"); */
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  mix-blend-mode:screen;   /* light is added on top of the photographed screens */
}
.visor-layer{position:absolute;inset:0;pointer-events:none}
.visor-face{position:absolute;transform:translate(-50%,-50%);height:auto;pointer-events:none}
.lineup-names{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:20px;
  text-align:center;font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  --c:#ff5a3c;
  position:relative;overflow:hidden;isolation:isolate;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px 30px;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s,border-color .32s;
}
/* soft colored glow blob that blooms from the icon on hover */
.card::before{
  content:"";position:absolute;z-index:-1;top:-40px;left:-40px;
  width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 55%,transparent),transparent 70%);
  opacity:0;transform:scale(.5);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1);
}
/* diagonal sheen sweep */
.card::after{
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--c) 16%,transparent) 47%,transparent 64%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.card:hover,.card:focus-within{
  transform:translateY(-8px);
  border-color:color-mix(in srgb,var(--c) 55%,var(--line));
  box-shadow:0 26px 50px -26px color-mix(in srgb,var(--c) 60%,rgba(0,0,0,.4));
}
.card:hover::before,.card:focus-within::before{opacity:1;transform:scale(1)}
.card:hover::after,.card:focus-within::after{transform:translateX(120%)}

.card-ico{
  width:60px;height:60px;margin-bottom:18px;border-radius:18px;
  display:grid;place-items:center;color:var(--c);
  background:color-mix(in srgb,var(--c) 12%,#fff);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),background .3s;
}
.card:hover .card-ico{transform:rotate(-6deg) scale(1.08);background:color-mix(in srgb,var(--c) 20%,#fff)}
.card-ico .ic{width:34px;height:34px;overflow:visible}
.card h3{font-size:19px;margin-bottom:6px;letter-spacing:-.01em}
.card p{color:var(--ink-soft);font-size:15px}

/* ---- per-icon interactive animations (play on hover) ---- */
/* 1 · chat — typing dots bounce */
.card:hover .ic-chat .dot{animation:dotBounce .9s ease-in-out infinite}
.card:hover .ic-chat .d2{animation-delay:.15s}
.card:hover .ic-chat .d3{animation-delay:.3s}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
/* 2 · face — pupils glance around */
.card:hover .ic-face .pupil{animation:glance 1.6s ease-in-out infinite}
@keyframes glance{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-1px)}50%{transform:translate(0,2px)}75%{transform:translate(-4px,-1px)}}
/* 3 · phone — signal waves pulse outward */
.ic-phone .wave{opacity:.35;transform-origin:36px 33px}
.card:hover .ic-phone .w1{animation:wavePulse 1.4s ease-out infinite}
.card:hover .ic-phone .w2{animation:wavePulse 1.4s ease-out infinite .4s}
@keyframes wavePulse{0%{opacity:0;transform:scale(.6)}40%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
/* 4 · heart — beats, sparkles twinkle */
.ic-heart .heart{transform-origin:32px 34px}
.card:hover .ic-heart .heart{animation:beat 1s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.16)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
.ic-heart .spark{opacity:0;transform-origin:center}
.card:hover .ic-heart .s1{animation:twinkle 1.2s ease-in-out infinite}
.card:hover .ic-heart .s2{animation:twinkle 1.2s ease-in-out infinite .6s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
/* 5 · abc — gentle wiggle */
.ic-abc .abc{transform-origin:32px 30px}
.card:hover .ic-abc .abc{animation:wiggle 1.1s ease-in-out infinite}
.card:hover .ic-abc .abc:last-child{animation-delay:.12s}
@keyframes wiggle{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-6deg) translateY(-1px)}75%{transform:rotate(6deg) translateY(-1px)}}
/* 6 · timer — hand sweeps, zzz drifts */
.ic-timer .hand{transform-origin:28px 38px}
.card:hover .ic-timer .hand{animation:sweep 1.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.ic-timer .zzz{opacity:.5;transform-origin:46px 19px}
.card:hover .ic-timer .zzz{animation:zfloat 1.6s ease-in-out infinite}
@keyframes zfloat{0%,100%{opacity:.4;transform:translateY(0) scale(.95)}50%{opacity:1;transform:translateY(-4px) scale(1.05)}}
@media(prefers-reduced-motion:reduce){
  .card *{animation:none!important}
}

/* PERSONAS */
.persona-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.persona{
  background:#fbf9f4;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 12px 18px;text-align:center;transition:transform .2s ease,box-shadow .3s;
}
.persona:hover{transform:translateY(-5px);box-shadow:0 24px 44px -28px rgba(0,0,0,.3)}
.pshot{position:relative;width:100%;aspect-ratio:208/300;overflow:hidden;border-radius:16px}
.pshot img{position:absolute;top:0;left:50%;transform:translateX(-50%);width:118%;max-width:none}
.card-visor{position:absolute;left:50%;top:40.5%;width:66%;transform:translate(-50%,-50%)}
.persona .pname{margin-top:14px;font-weight:700;font-size:15px;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:7px}
.pdot{width:9px;height:9px;border-radius:50%;display:inline-block}
.persona .pdesc{margin-top:4px;font-size:12.5px;color:var(--ink-soft)}

/* SOCIAL */
.social{text-align:center;position:relative}
.social-inner{max-width:60ch;margin:0 auto}

/* COMING SOON */
.soon{text-align:center}
.soon .section-sub{margin-inline:auto}
.soon-tag{
  font-size:13px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin-bottom:16px;
}
.soon-form{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin:34px auto 0;max-width:440px;
}
.soon-input{
  flex:1 1 220px;min-width:0;padding:14px 18px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:"Inter",sans-serif;font-size:15px;
}
.soon-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.soon-form .btn{border:none;cursor:pointer;font-family:"Inter",sans-serif}
.soon-note{margin-top:14px;font-size:13px;color:var(--ink-soft)}
.dots{display:flex;gap:14px;justify-content:center;margin-top:40px}
.dots span{width:14px;height:14px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.25s;background:#5aaaff}
.dots span:nth-child(3){animation-delay:.5s;background:#ffcc33}
@keyframes pulse{0%,100%{transform:scale(.6);opacity:.4}50%{transform:scale(1.2);opacity:1}}

/* FOOTER */
.footer{border-top:1px solid var(--line);padding:clamp(40px,6vw,72px) clamp(18px,4vw,44px);text-align:center}
.foot-big{font-size:clamp(60px,16vw,180px);letter-spacing:-.05em;line-height:1}
.foot-big .dot{color:var(--accent)}
.foot-links{display:flex;gap:22px;justify-content:center;margin:24px 0 14px;font-weight:500;font-size:14px}
.foot-links a{color:var(--ink-soft)}
.foot-links a:hover{color:var(--ink)}
.foot-note{color:var(--ink-soft);font-size:13px}

/* RESPONSIVE */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-copy{order:2}
  .hero-stage{order:1}
  .lede{margin-inline:auto}
  .hero-cta{justify-content:center}
  .cards{grid-template-columns:repeat(2,1fr)}
  .persona-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:540px){
  .nav-links{gap:12px}
  .nav-links a{font-size:12.5px}
  .cards{grid-template-columns:1fr}
  .persona-row{grid-template-columns:repeat(2,1fr)}
  .lineup-names{font-size:10px;letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track,.dots span{animation:none}
}