/* Landing page */

/* ---------- 1. Hook ---------- */
.hook { position: relative; background: var(--cream); }
.hook__stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #526B95; }
.hook__shake { position: absolute; inset: -24px; }
/* key art: covers the stage (JS sizes the box to the art's own aspect so the crack layer stays on the pane) */
.hook__art { position: absolute; inset: 0; }
.hook__art picture, .hook__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hook__img { object-fit: cover; object-position: 50% 50%; }
.hook__crack { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; overflow: visible; }
.hook__crack .crack-frost, .hook__crack .crack-web, .hook__crack .crack-shards, .hook__crack .crack-dot { opacity: 0; }
.hook__crackle { position: absolute; z-index: 4; left: 4%; top: 17%; margin: 0; font-size: clamp(40px, 6vw, 96px); padding: .2em .5em .32em; border-radius: .42em; transform: rotate(-8deg); opacity: 0; pointer-events: none; }
.hook__crackle .blk { margin: .12em .04em 0 0; }
.hook__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 19, 58, .45) 0, rgba(23, 19, 58, 0) 22%), radial-gradient(120% 90% at 0% 100%, rgba(23, 19, 58, .35), rgba(23, 19, 58, 0) 55%); }

.hook__stack { position: absolute; z-index: 3; right: var(--gutter); top: clamp(86px, 13vh, 150px); display: flex; flex-direction: column; align-items: flex-end; gap: clamp(12px, 1.6vw, 20px); }
.hook__say { margin: 0; font-size: clamp(26px, 3.5vw, 58px); padding: .32em .62em .44em; border-radius: .5em; transform-origin: 100% 50%; }
.hook__say .blk { margin-top: .16em; }

.hook__dock { position: absolute; z-index: 3; left: var(--gutter); bottom: var(--gutter); width: min(600px, calc(100% - 2 * var(--gutter))); padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.6vw, 36px) clamp(22px, 2.6vw, 34px); border-radius: 34px; }
.hook__logo { margin: 0 0 10px -6px; }
.hook__logo img { width: min(100%, 430px); height: auto; }
.hook__pitch { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.5; max-width: 46ch; }
.hook__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 20px; }

.hook__cue { position: absolute; z-index: 3; right: var(--gutter); bottom: calc(var(--gutter) + 6px); display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: #fff; text-shadow: 0 2px 0 rgba(14, 11, 38, .5); }
.hook__cue svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 0 rgba(14, 11, 38, .5)); }

/* reveal: a normal section without motion, the cream wipe with it */
.reveal { position: relative; overflow: hidden; background: var(--cream); padding: 120px var(--gutter) 110px; text-align: center; }
.reveal__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.reveal__logo { width: clamp(240px, 34vw, 520px); height: auto; margin-bottom: clamp(10px, 2vh, 26px); filter: drop-shadow(0 18px 24px rgba(120, 70, 20, .22)); }
.reveal__head { font-size: clamp(56px, 10vw, 152px); }
.reveal__sub { margin-top: clamp(22px, 3.4vh, 40px); font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--ink-soft); max-width: 40ch; }
.rtoy { position: absolute; z-index: 1; pointer-events: none; height: auto; }
.rtoy[data-t="a"] { left: 4%; top: 8%; width: clamp(150px, 22vw, 380px); }
.rtoy[data-t="b"] { right: 6%; top: 10%; width: clamp(110px, 15vw, 250px); }
.rtoy[data-t="c"] { right: 9%; bottom: 10%; width: clamp(60px, 8vw, 140px); }
.rtoy[data-t="d"] { left: 7%; bottom: 9%; width: clamp(110px, 15vw, 250px); }
.rtoy[data-t="e"] { right: 24%; top: 6%; width: clamp(48px, 6vw, 110px); }
.rtoy[data-t="f"] { left: 24%; bottom: 6%; width: clamp(56px, 7vw, 130px); }
.rtoy[data-t="g"] { right: 3%; top: 44%; width: clamp(80px, 11vw, 190px); }
.rtoy[data-t="h"] { left: 3%; top: 46%; width: clamp(48px, 6vw, 110px); }
.rtoy[data-t="i"] { right: 27%; bottom: 5%; width: clamp(70px, 9vw, 150px); }

.motion .reveal { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; padding: 70px var(--gutter) 40px; clip-path: circle(0% at 50% 28%); }

@media (max-width: 720px) {
  .hook__crackle { left: 8%; top: 46%; }
  .hook__stack { top: 78px; gap: 10px; }
  .hook__say { font-size: clamp(22px, 6.4vw, 30px); }
  .hook__dock { bottom: 16px; padding: 18px 18px 20px; border-radius: 26px; }
  .hook__logo img { width: min(100%, 300px); }
  .hook__pitch { font-size: .98rem; }
  .hook__acts { margin-top: 14px; gap: 12px; }
  .hook__acts .btn { width: 100%; justify-content: center; }
  .hook__acts .stores { width: 100%; }
  .hook__acts .store { flex: 1 1 0; min-width: 0; }
  .hook__cue { display: none; }
  .rtoy[data-t="e"], .rtoy[data-t="i"], .rtoy[data-t="h"] { display: none; }
  .rtoy[data-t="a"] { top: 4%; }
  .rtoy[data-t="g"] { top: auto; bottom: 22%; }
}
.hook__dock-text { display: contents; }
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  .hook__dock { width: min(1060px, calc(100% - 2 * var(--gutter))); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 4px 34px; align-items: center; padding: 22px 30px 24px; }
  .hook__logo { grid-row: span 2; margin: 0; }
  .hook__logo img { width: 100%; }
  .hook__pitch { max-width: 58ch; }
  .hook__acts { margin-top: 10px; }
}
@media (max-height: 760px) and (min-width: 721px) {
  .hook__say { font-size: clamp(24px, 3vw, 44px); }
  .hook__dock { width: min(540px, calc(100% - 2 * var(--gutter))); }
  .hook__logo img { width: min(100%, 340px); }
}

/* ---------- 2. Slides ---------- */
.slides { position: relative; overflow: hidden; }
.slide { position: relative; overflow: hidden; padding: 110px var(--gutter) 96px; display: grid; gap: 48px; align-items: center; }
.slide--sky { background: var(--sky); }
.slide--grass { background: var(--grass); }
.slide--sun { background: var(--sunshine); }
.slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.slide__copy { position: relative; z-index: 2; max-width: 600px; }
.slide__tint { position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none; }
.slide__head { font-size: clamp(54px, 7.4vw, 128px); }
.slide__sub { margin-top: clamp(26px, 3.4vh, 40px); font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.4; font-weight: 800; max-width: 26ch; }
.facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; max-width: 44ch; }
.facts li { position: relative; padding-left: 36px; font-size: 1.02rem; line-height: 1.45; }
.facts li::before { content: ""; position: absolute; left: 0; top: .08em; width: 24px; height: 24px; background: url("../assets/toys/coin.svg") center / contain no-repeat; }
.slide--grass .facts li::before { background-image: url("../assets/toys/star-sunshine.svg"); }
.slide--sun .facts li::before { background-image: url("../assets/toys/coin.svg"); }

.stoy { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); min-width: 54px; height: auto; transform: rotate(var(--r)); pointer-events: none; }

.phone { position: relative; z-index: 2; margin: 0; width: 100%; aspect-ratio: 3000 / 1470; }
.phone__scr { position: absolute; left: 2.2%; top: 5.1%; width: 95.6%; height: 89.8%; overflow: hidden; border-radius: 6.4% / 13.8%; background: #0E0B26; }
.phone__scr video { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.phone__bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.slide--sky .phone { filter: drop-shadow(0 40px 46px rgba(12, 60, 130, .32)) drop-shadow(0 10px 14px rgba(10, 40, 90, .24)); }
.slide--grass .phone { filter: drop-shadow(0 40px 46px rgba(20, 90, 40, .32)) drop-shadow(0 10px 14px rgba(10, 60, 25, .24)); }
.slide--sun .phone { filter: drop-shadow(0 40px 46px rgba(120, 70, 20, .28)) drop-shadow(0 10px 14px rgba(70, 40, 10, .2)); }

@media (min-width: 900px) {
  .slide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 80px); min-height: 100vh; padding: 110px clamp(40px, 5vw, 96px) 80px; }
  .slide--grass { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .motion .slides { height: 100vh; }
  .motion .slides__track { position: relative; height: 100vh; }
  .motion .slide { height: 100vh; min-height: 0; }
}
@media (max-width: 899px) {
  .slide--grass .phone { order: 2; }
  .stoy { opacity: .9; }
}

/* ---------- 3. Stars: the real win screen, each star called out ---------- */
.stars { background: var(--cream); padding: clamp(96px, 14vh, 160px) var(--gutter) clamp(110px, 15vh, 170px); overflow: hidden; }
.stars__in { max-width: 1240px; margin: 0 auto; }
.stars__intro { text-align: center; display: flex; flex-direction: column; align-items: center; }
.stars__head { font-size: clamp(50px, 6.4vw, 104px); }
.stars__intro p { margin-top: 34px; font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; }
.stars__board { position: relative; margin-top: clamp(56px, 8vh, 90px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); grid-template-areas: "s1 shot s3" ". s2 ."; gap: 28px 32px; align-items: center; }
.stars__proof { grid-area: shot; margin: 0; transform: rotate(-1.5deg); background: #fff; padding: 12px 12px 6px; border-radius: 26px; box-shadow: 0 10px 0 var(--cream-lip), 0 34px 50px rgba(31, 26, 77, .22); }
.stars__proof img { border-radius: 16px; width: 100%; }
.stars__proof figcaption { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink-soft); padding: 8px 6px 4px; text-align: right; }
.stars__list { display: contents; list-style: none; }
.star { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 16px 20px 18px 14px; background: var(--cream); border-radius: 26px; box-shadow: 0 8px 0 var(--cream-lip), 0 22px 34px rgba(31, 26, 77, .2); }
.star--1 { grid-area: s1; transform: rotate(-3deg); margin-right: -70px; }
.star--2 { grid-area: s2; justify-self: center; width: min(100%, 360px); transform: rotate(1.5deg); margin-top: -34px; }
.star--3 { grid-area: s3; transform: rotate(3deg); margin-left: -70px; }
.star__icon { width: 74px; flex: none; filter: drop-shadow(0 8px 10px rgba(120, 70, 20, .25)); }
.star h3 { font-size: clamp(24px, 2.1vw, 32px); }
.star p { margin-top: 6px; color: var(--ink-soft); font-size: .98rem; line-height: 1.45; }
@media (max-width: 900px) {
  .stars__board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "shot" "s1" "s2" "s3"; gap: 18px; }
  .star--1, .star--2, .star--3 { margin: 0; width: auto; justify-self: stretch; }
  .star--1 { transform: rotate(-1.5deg); } .star--3 { transform: rotate(1.5deg); }
  .stars__proof { margin-bottom: 18px; }
}

/* ---------- 4. Wardrobe: the real shop, and a conveyor of what is in it ---------- */
.wardrobe { position: relative; overflow: hidden; background: var(--tomato); padding: clamp(96px, 13vh, 150px) 0 clamp(80px, 11vh, 130px); }
.wardrobe__in { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 90px); align-items: center; }
.wardrobe__head { font-size: clamp(50px, 6.4vw, 108px); --lipc: #8E1F17; }
.wardrobe__copy p { margin-top: 30px; max-width: 34ch; font-size: 1.15rem; font-weight: 800; color: var(--deep); }
.wardrobe__media { position: relative; padding: 8% 0 0 0; }
.wardrobe__clothes { position: absolute; z-index: 1; right: -2%; top: -6%; width: 40%; margin: 0; padding: 10px; background: var(--cream); border-radius: 24px; transform: rotate(6deg); box-shadow: 0 9px 0 #C9301F, 0 30px 40px rgba(80, 14, 8, .3); }
.wardrobe__clothes img { width: 100%; border-radius: 16px; }
.phone--shop { z-index: 2; filter: drop-shadow(0 44px 50px rgba(80, 14, 8, .35)) drop-shadow(0 12px 16px rgba(80, 14, 8, .25)); }
.phone--shop .phone__scr img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.belt { position: relative; z-index: 2; margin-top: clamp(56px, 9vh, 96px); overflow-x: auto; scrollbar-width: none; }
.belt::-webkit-scrollbar { display: none; }
.motion .belt { overflow: hidden; }
.belt__row { list-style: none; margin: 0; padding: 10px var(--gutter) 22px; display: flex; gap: 14px; width: max-content; }
.belt__row li { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 22px 8px 12px; border-radius: 999px; background: var(--cream); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1; box-shadow: 0 6px 0 #C9301F, 0 16px 22px rgba(80, 14, 8, .22); }
.belt__row li::before { content: ""; width: 1.3em; height: 1.3em; background: url("../assets/toys/star-sunshine.svg") center / contain no-repeat; }
.belt__row li.is-coin::before { background-image: url("../assets/toys/coin.svg"); }
@media (max-width: 900px) {
  .wardrobe__in { grid-template-columns: minmax(0, 1fr); }
  .wardrobe__media { padding-top: 22%; }
  .wardrobe__clothes { width: 46%; right: 0; top: 0; }
}

/* ---------- 5. Outro ---------- */
.outro { position: relative; overflow: hidden; background: var(--night); color: var(--cream); padding: clamp(100px, 14vh, 160px) var(--gutter) clamp(90px, 12vh, 140px); }
.outro__in { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 90px); align-items: center; }
.outro__logo { width: min(100%, 440px); height: auto; margin: 0 0 26px -8px; }
.outro__head { font-size: clamp(54px, 6vw, 100px); }
.outro__head .ln { white-space: nowrap; }
.outro__sub { margin: 30px 0 22px; font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.3; color: #FFE38A; }
.outro__fine { margin-top: 22px; color: #E6DDFF; max-width: 40ch; font-size: 1rem; }
.outro .phone { filter: drop-shadow(0 50px 60px rgba(20, 5, 60, .45)) drop-shadow(0 14px 18px rgba(20, 5, 60, .3)); }
.phone--trailer .phone__scr video { object-fit: contain; background: #0E0B26; }
.phone__play { position: absolute; inset: 0; margin: auto; width: clamp(76px, 9vw, 120px); height: clamp(76px, 9vw, 120px); border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--btn); box-shadow: 0 8px 0 var(--btn-lip), 0 24px 36px rgba(14, 11, 38, .45); cursor: pointer; transition: transform .2s var(--ease-out); }
.phone__play svg { width: 44%; height: 44%; margin-left: 8%; }
.phone__play:hover { transform: scale(1.06); }
.phone__play:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--btn-lip), 0 12px 20px rgba(14, 11, 38, .45); }
.phone--trailer.is-playing .phone__play { opacity: 0; pointer-events: none; transition: opacity .25s; }
.labels { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.label { position: relative; width: clamp(170px, 15vw, 230px); aspect-ratio: 1080 / 356; background: center / 100% 100% no-repeat; }
.label span { position: absolute; left: 4%; right: 4%; top: 46%; transform: translateY(-50%); text-align: center; white-space: nowrap; line-height: 1; font-family: var(--display); font-weight: 800; font-size: clamp(.92rem, 1.1vw, 1.15rem); color: #fff; text-shadow: 0 2px 0 rgba(14, 11, 38, .45), 0 0 6px rgba(14, 11, 38, .25); }
.label--sky { background-image: url("../assets/toys/label-sky.svg"); }
.label--tomato { background-image: url("../assets/toys/label-tomato.svg"); }
.label--grass { background-image: url("../assets/toys/label-grass.svg"); }
.label--grape { background-image: url("../assets/toys/label-grape.svg"); }
.label--sunshine { background-image: url("../assets/toys/label-sunshine.svg"); }
.label--sunshine span { color: var(--ink); text-shadow: none; }
@media (max-width: 900px) {
  .outro__in { grid-template-columns: 1fr; }
  .outro > .stoy:nth-of-type(n+3) { display: none; }
  .outro__media { order: -1; }
}