/* Hero + header in the cast's flat 90s cel style: ink outlines, flat fills, hard offset shadows. */
:root{--hero-ink:#1a1720;--outline:2px 0 var(--hero-ink),-2px 0 var(--hero-ink),0 2px var(--hero-ink),0 -2px var(--hero-ink),1.5px 1.5px var(--hero-ink),-1.5px -1.5px var(--hero-ink),1.5px -1.5px var(--hero-ink),-1.5px 1.5px var(--hero-ink)}

/* Scene */
.hero{overflow:hidden;background:#2e2850}
.hero-scene{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block}
.hs-stars>*{transform-box:fill-box;transform-origin:center;animation:hs-twinkle 3.2s ease-in-out infinite}
.hs-stars>:nth-child(3n){animation-delay:-1.1s}.hs-stars>:nth-child(3n+1){animation-delay:-2.2s}
.hs-blink{animation:rec-blink 1.4s steps(1) infinite}
.hs-tree{transform-box:fill-box;transform-origin:50% 100%;animation:hs-sway 6s ease-in-out infinite}
.hs-tree-front{animation-duration:4.8s;animation-delay:-1.4s}
.hs-glow{transform-box:fill-box;transform-origin:center;animation:hs-glow 3.6s ease-in-out infinite}
.hs-banner{transform-box:fill-box;transform-origin:0 0;animation:hs-flap 2.8s ease-in-out infinite}
.hs-ripple ellipse{transform-box:fill-box;transform-origin:center;animation:hs-ripple 2.6s ease-out infinite}
.hs-ripple ellipse:nth-child(2){animation-delay:-1.3s}
.hs-drops{animation:hs-drip 1.2s ease-in infinite}
.hs-pigeon{transform-box:fill-box;transform-origin:50% 100%;animation:hs-peck 3.4s ease-in-out infinite}

/* Header */
.site-header .brand{font-family:var(--display);font-weight:400;font-size:40px;letter-spacing:-.5px;text-shadow:var(--outline),3px 4px 0 var(--hero-ink)}
.site-header .brand-nyu{align-self:center;margin-left:8px;padding:1px 8px 3px;font-size:16px;letter-spacing:0;opacity:1;background:#57068c;border:2px solid var(--hero-ink);border-radius:6px;box-shadow:2px 3px 0 var(--hero-ink);text-shadow:none;rotate:-6deg}
.site-header .brand-star{display:inline-block;color:var(--pink);font-size:26px;text-shadow:var(--outline);animation:hs-spin 9s linear infinite}
.site-header .header-note{font-family:var(--display);font-size:18px;color:var(--cream);text-shadow:var(--outline)}
.site-header .glass-button{gap:10px;padding:8px 18px 9px;background:var(--cream);color:var(--hero-ink);border:2.5px solid var(--hero-ink);box-shadow:3px 4px 0 var(--hero-ink);backdrop-filter:none;white-space:nowrap;font-family:var(--display);font-size:20px;line-height:1.1;transition:transform .15s,box-shadow .15s,background .2s}
.site-header .glass-button:nth-child(2){rotate:1.2deg}.site-header .glass-button:first-child{rotate:-1deg}
.site-header .glass-button:hover{background:#fff1c4;transform:translate(-1px,-2px);box-shadow:4px 6px 0 var(--hero-ink)}
.site-header .glass-button:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--hero-ink)}
.site-header .join-button{background:var(--pink);rotate:-2deg}
.site-header .join-button:hover{background:#ffa3cf}

/* Copy */
.hero .eyebrow{display:inline-block;padding:4px 12px 5px;background:#101010;color:var(--cream);opacity:1;font-size:11px;letter-spacing:2.5px;box-shadow:0 0 3px 2px #15121980;transform:rotate(-1.5deg)}
.hero-copy{text-shadow:none}
.hero h1{text-shadow:var(--outline),3px 0 var(--hero-ink),-3px 0 var(--hero-ink),0 3px var(--hero-ink),0 -3px var(--hero-ink),6px 8px 0 var(--hero-ink)}
.hero h1 em{display:inline-block;color:var(--pink);transform:rotate(-3deg) translateY(4px)}
.hero-description{position:relative;width:fit-content;margin:22px auto 0;padding:12px 22px 14px;background:#eee8d9;color:#38303e;border:2.5px solid var(--hero-ink);border-radius:20px 20px 20px 6px;box-shadow:4px 6px 0 var(--hero-ink);font-family:var(--display);font-size:24px;line-height:1.2}
.hero-description:after{content:'';position:absolute;bottom:-16px;left:34px;width:20px;height:16px;background:#eee8d9;border-left:2.5px solid var(--hero-ink);border-bottom:2.5px solid var(--hero-ink);clip-path:polygon(0 0,100% 0,0 100%);transform:skewX(-20deg)}

/* Enrollment card */
.hero .school-track{color:var(--cream);text-shadow:var(--outline),3px 4px 0 var(--hero-ink)}
.hero .school-caption{color:var(--cream);text-shadow:var(--outline);font-family:var(--display);font-size:19px}
.hero .enroll-form{background:var(--cream);border:3px solid var(--hero-ink);border-radius:26px;box-shadow:6px 8px 0 var(--hero-ink);backdrop-filter:none;rotate:-1deg}
.hero .enroll-form input{background:#f1e9d6;color:var(--hero-ink);border:2px dashed #1a172066;border-radius:16px;font-size:16px}
.hero .enroll-form input::placeholder{color:#1a172080}
.hero .join-count{margin-top:12px;color:var(--hero-ink);font-family:var(--display);font-size:17px;line-height:1.25;text-align:center}
.hero .join-count strong{display:inline-block;padding:0 6px;background:var(--pink);border:2px solid var(--hero-ink);border-radius:6px;rotate:-2deg;font-weight:400}
.hero .primary-button{background:var(--pink);color:var(--hero-ink);border:2.5px solid var(--hero-ink);box-shadow:3px 4px 0 var(--hero-ink);font-family:var(--display);font-size:22px;font-weight:400;transition:transform .15s,box-shadow .15s,background .2s}
.hero .primary-button:hover{background:#ffa3cf;transform:translate(-1px,-2px);box-shadow:4px 6px 0 var(--hero-ink)}
.hero .primary-button:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--hero-ink)}
.hero .form-error{color:#c23b3b;font-weight:600}
.hero .preview-note{color:var(--cream);text-shadow:var(--outline);font-size:11px;margin-top:14px}

/* Corner bits: an NYC street sign and a cartoon scroll button */
.hero .location-note{bottom:30px;left:auto;right:calc(4.3% + 72px);padding:6px 12px 7px;background:#2f6b45;color:var(--cream);border:2.5px solid var(--hero-ink);border-radius:6px;font-weight:700;letter-spacing:1.4px;rotate:-2deg;box-shadow:inset 0 0 0 2px #2f6b45,inset 0 0 0 3.5px var(--cream),3px 4px 0 var(--hero-ink)}
.hero .scroll-cue{display:flex;align-items:center;justify-content:center;width:52px;height:52px;bottom:28px;opacity:1;background:var(--cream);color:var(--hero-ink);border:2.5px solid var(--hero-ink);border-radius:50%;box-shadow:3px 4px 0 var(--hero-ink);font-size:24px;animation:crew-bob 2.4s ease-in-out infinite}

@media(max-width:1000px){.site-header .glass-button{font-size:17px;padding:7px 13px 8px}}
@media(max-width:650px){
  /* Fit the scene to a wider box so the whole arch shows; the sky above it is drawn past the viewBox. */
  .hero-scene{inset:auto auto 0 50%;width:210vw;height:auto;aspect-ratio:1600/1000;translate:-50% 0;overflow:visible}
  .site-header .brand{font-size:28px}
  .site-header .brand-nyu{font-size:11px;padding:0 5px 2px;margin-left:5px}
  .site-header .brand-star,.hero .scroll-cue{display:none}
  .site-header .glass-button,.site-header .lore-nav,.site-header .join-button{white-space:nowrap;font-size:15px;padding:5px 10px 6px;gap:6px;box-shadow:2px 3px 0 var(--hero-ink)}
  .hero .eyebrow{font-size:9px}
  .hero h1{text-shadow:var(--outline),4px 6px 0 var(--hero-ink)}
  .hero-description{font-size:20px;padding:10px 16px 12px}
  .hero .school-caption{font-size:16px}
}

@keyframes hs-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
@keyframes hs-sway{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}
@keyframes hs-glow{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes hs-flap{0%,100%{transform:skewY(0)}50%{transform:skewY(4deg) scaleX(.94)}}
@keyframes hs-ripple{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(3.2)}}
@keyframes hs-drip{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(44px);opacity:0}}
@keyframes hs-peck{0%,62%,100%{transform:rotate(0)}70%,78%{transform:rotate(14deg)}}
@keyframes hs-spin{to{transform:rotate(360deg)}}
.hero .enroll-cta .primary-button{margin-top:0}