/* The Sweet Hyper v2 — the film layer of the factory tour (site-wide pieces + home moments).
   Premiere searchlights and a foil sheen in the hero, the deals marquee's chasing bulbs, room
   intertitles settling in, the film-strip reel, the end credits, the tour stub, and the
   "television room" beam that carries a product into the trolley. */

/* ---------- Hero: premiere searchlights ---------- */
/* A night sky over the store: the royal deepens towards the top so the beams read. */
.sh-home .sh-hero { background: radial-gradient(140% 90% at 50% 115%, var(--sh-royal) 38%, var(--sh-royal-2) 70%, var(--sh-cinema) 100%); }
.sh-hero__lights { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sh-hero__lights::after { content: ""; position: absolute; left: 0; right: 0; bottom: -40px; height: 220px; background: radial-gradient(40% 70% at 12% 100%, rgba(255, 241, 0, .16), transparent 70%), radial-gradient(40% 70% at 86% 100%, rgba(255, 241, 0, .14), transparent 70%); }
.sh-hero__lights i {
	position: absolute; bottom: -4%; left: var(--x); width: clamp(300px, 34vw, 600px); height: 150%;
	transform-origin: 50% 100%; transform: rotate(var(--a0));
	background: linear-gradient(to top, rgba(255, 250, 222, var(--o)) 0%, rgba(255, 250, 222, calc(var(--o) * .4)) 40%, rgba(255, 250, 222, calc(var(--o) * .12)) 75%, transparent 96%);
	clip-path: polygon(49.2% 100%, 50.8% 100%, 80% 0, 20% 0);
	filter: blur(14px); mix-blend-mode: screen;
	opacity: 0; transition: opacity 1.4s ease .5s;
	animation: sh-sweep var(--t) ease-in-out var(--dl, 0s) infinite alternate;
}
.sh-hero__lights i:nth-child(1) { --x: -8%; --a0: -24deg; --a1: 10deg; --t: 7.5s; --o: .36; }
.sh-hero__lights i:nth-child(2) { --x: 66%; --a0: 22deg; --a1: -12deg; --t: 9s; --dl: -3s; --o: .32; }
.sh-hero__lights i:nth-child(3) { --x: 30%; --a0: -12deg; --a1: 14deg; --t: 12s; --dl: -6s; --o: .16; }
.sh-hero.is-ready .sh-hero__lights i, .sh-hero.is-lit .sh-hero__lights i { opacity: 1; }
.sh-hero.is-off .sh-hero__lights i { animation-play-state: paused; }
@keyframes sh-sweep { from { transform: rotate(var(--a0)); } to { transform: rotate(var(--a1)); } }

/* "trolley." catches the light: a foil sheen runs across the letters every few seconds. */
.sh-hero__accent .sh-ch:not(.sh-ch--sp) {
	background: linear-gradient(100deg, var(--sh-yellow) 42%, #fffbd8 50%, var(--sh-yellow) 58%) 100% 0 / 420% 100% no-repeat, var(--sh-yellow);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: sh-sheen 6.5s cubic-bezier(.5, 0, .3, 1) calc(2.8s + var(--i) * 50ms) infinite;
}
@keyframes sh-sheen { 0%, 72% { background-position: 100% 0, 0 0; } 100% { background-position: 0 0, 0 0; } }

/* ---------- Room intertitles settle in like a title card ---------- */
.sh-js .sh-room { opacity: 0; letter-spacing: .06em; transition: opacity .9s var(--ease), letter-spacing 1.2s var(--ease); }
.sh-js .sh-room.is-in { opacity: 1; letter-spacing: -.01em; }
.sh-room--dark .sh-room__name { animation: sh-foil 7s ease-in-out infinite alternate; }
@keyframes sh-foil { from { background-position: 0 0; } to { background-position: 100% 0; } }

.sh-dealsband__head > .sh-room { grid-column: 1 / -1; margin-bottom: -8px; }

/* ---------- Room 07: the stores join the film rooms (cinema dark with a warm light from above) ---------- */
.sh-home .sh-stores { background: radial-gradient(70% 45% at 50% 0%, rgba(255, 210, 0, .1), transparent 70%), var(--sh-cinema); }
.sh-home .sh-stores .sh-store { background: #0b1a45; box-shadow: inset 0 0 0 1px rgba(255, 210, 0, .14); }
@media (max-width: 699px) {
	/* Phones: the four stores side by side in a swipe row instead of four tall cards. */
	.sh-home .sh-stores__list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gut) 8px; margin-inline: calc(var(--gut) * -1); scrollbar-width: none; }
	.sh-home .sh-stores__list::-webkit-scrollbar { display: none; }
	.sh-home .sh-stores__list > .sh-store { flex: 0 0 84%; scroll-snap-align: center; }
}

/* Small shared fixes from the v2 review. */
.sh-h2 { text-wrap: balance; }
.sh-pack__step .sh-pack__per-item { color: var(--sh-royal); }
@media (max-width: 699px) {
	.sh-packs__b { min-height: 40px; }
	.sh-main .sh-link { display: inline-block; padding-block: 8px; }
}
@media (min-width: 900px) { .sh-foot__base { padding-right: 110px; } }

/* ---------- Room 08: the reel becomes a strip of film ---------- */
.sh-home .sh-reel { position: relative; padding-block: 26px; background: #0a0d18; }
.sh-home .sh-reel::before, .sh-home .sh-reel::after {
	content: ""; position: absolute; left: 0; right: 0; height: 10px; z-index: 1; pointer-events: none;
	background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(244, 239, 228, .88) 8px 22px, transparent 22px 30px);
	border-radius: 2px;
}
.sh-home .sh-reel::before { top: 7px; }
.sh-home .sh-reel::after { bottom: 7px; }
.sh-home .sh-reel__run { align-items: stretch; gap: 10px; }
.sh-home .sh-reel__f { height: 250px !important; width: 330px; border-radius: 6px; }
.sh-home .sh-reel__f img { filter: saturate(1.06) contrast(1.03); }
@media (max-width: 699px) { .sh-home .sh-reel__f { height: 170px !important; width: 226px; } }

/* ---------- End credits ---------- */
.sh-credits { position: relative; margin: 10px; border-radius: 34px; background: var(--sh-cinema); color: #fff; overflow: hidden; isolation: isolate; }
.sh-credits::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 0%, rgba(255, 210, 0, .12), transparent 70%), radial-gradient(50% 40% at 50% 100%, rgba(0, 162, 234, .12), transparent 70%); }
.sh-credits__win { position: relative; height: min(calc(100svh - var(--head-h) - 20px), 880px); overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.sh-credits__roll { width: min(760px, 100% - 2 * var(--gut)); margin-inline: auto; text-align: center; padding-block: 18svh 22svh; will-change: transform; }
.sh-credits__open { margin: 0 0 .4rem; font: 650 1rem/1.3 var(--f-t); color: rgba(255, 255, 255, .7); }
.sh-credits__open em { font: italic 500 1.15em var(--f-title); font-variation-settings: "WONK" 1; color: var(--sh-gold); }
.sh-credits__title { margin: 0 0 clamp(64px, 12vh, 120px); font: 780 clamp(2.6rem, 6vw, 5rem)/.95 var(--f-d); letter-spacing: -.03em; }
.sh-credits__block { margin-bottom: clamp(56px, 10vh, 96px); }
.sh-credits__role { display: block; margin: 0 0 18px; font: italic 540 clamp(1.1rem, 1.6vw, 1.35rem)/1.1 var(--f-title); font-variation-settings: "WONK" 1, "opsz" 48; color: var(--sh-gold); }
.sh-credits__stars { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 28px; max-width: 640px; }
.sh-credits__stars a { display: inline-block; padding: 5px 4px; color: #fff; text-decoration: none; font: 600 clamp(1.1rem, 1.7vw, 1.45rem)/1.3 var(--f-d); letter-spacing: -.01em; transition: color .2s; }
@media (max-width: 699px) { .sh-credits__stars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sh-credits__stars a:hover, .sh-credits__stars a:focus-visible { color: var(--sh-yellow); }
.sh-credits__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 650 clamp(1.05rem, 1.6vw, 1.3rem)/1.3 var(--f-d); }
.sh-credits__list a { color: #fff; text-decoration: none; }
.sh-credits__list a:hover, .sh-credits__list a:focus-visible { color: var(--sh-yellow); }
.sh-credits__list span { margin-left: .5em; font: 500 .8em var(--f-t); color: rgba(255, 255, 255, .62); }
.sh-credits__pairs p { margin: 0 0 28px; font: 650 clamp(1.05rem, 1.6vw, 1.3rem)/1.3 var(--f-d); }
.sh-credits__pairs .sh-credits__role { margin-bottom: 8px; }
.sh-credits__end { padding-top: 6vh; }
.sh-credits__fin { margin: 0; font: italic 600 clamp(3.4rem, 9vw, 7rem)/1 var(--f-title); font-variation-settings: "WONK" 1, "opsz" 144; background: var(--sh-foilgold); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sh-foil 6s ease-in-out infinite alternate; padding: .06em .1em; }
.sh-credits__next { margin: 14px 0 28px; color: rgba(255, 255, 255, .78); font-size: 1.06rem; }
.sh-credits__cta { display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: center; align-items: center; }
.sh-link--light { color: #fff; text-decoration-color: var(--sh-yellow); }
.sh-credits.is-static .sh-credits__win { height: auto; -webkit-mask: none; mask: none; }
.sh-credits.is-static .sh-credits__roll { padding-block: var(--band); }
@media (max-width: 699px) { .sh-credits { margin: 6px; border-radius: 24px; } .sh-credits__stars { gap: 4px 18px; } }

/* ---------- Television room: the beam into the trolley ---------- */
.sh-beam { position: fixed; inset: 0; z-index: 500; pointer-events: none; }
.sh-tool--cart.is-beamed svg, .sh-bar__b.is-beamed svg { animation: sh-catch .55s var(--ease-pop); }
@keyframes sh-catch { 0% { transform: none; } 40% { transform: scale(1.3) rotate(-8deg); filter: drop-shadow(0 0 8px rgba(255, 210, 0, .9)); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.sh-hero__lights i, .sh-hero__accent .sh-ch, .sh-home .sh-dealsband::before, .sh-home .sh-dealsband::after, .sh-room__name, .sh-credits__fin { animation: none !important; }
	.sh-js .sh-room { opacity: 1; letter-spacing: -.01em; transition: none; }
	.sh-beam { display: none; }
}