@font-face{font-family:AvantGarde;src:url('assets/itc_avant_garde_medium.woff2') format('woff2');font-style:normal;font-weight:400 500;font-display:swap}
@font-face{font-family:AvantGarde;src:url('assets/itc_avant_garde_bold.woff2') format('woff2');font-style:normal;font-weight:600 900;font-display:swap}
@font-face{font-family:Snell;src:url('assets/SnellRoundhandW01-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{color-scheme:light;--ink:#0a0a0a;--paper:#fff;--pink:#eb237e;--pull:0}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:transparent}
body{font-family:AvantGarde,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit}
button,a{-webkit-user-select:none;user-select:none}
button{cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
[hidden]{display:none!important}
.ad{position:relative;width:300px;height:600px;overflow:hidden;background:var(--paper);color:var(--ink);isolation:isolate;border:1px solid #e3e3e3}
.brand-bar{position:absolute;inset:0 0 auto;height:77px;z-index:6;display:flex;align-items:center;flex-direction:column;background:#fff;padding-top:21px}
.logo{display:block;width:174px;height:auto;flex-shrink:0}
.collab{font-size:7px;font-weight:700;letter-spacing:2.5px;margin-top:8px;line-height:10px}
.icon-button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;padding:7px;background:#fff;color:#111}
.icon-button svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.replay{position:absolute;left:9px;top:22px;width:29px;height:29px;padding:7px;background:transparent}
.intro{position:absolute;inset:77px 0 57px;z-index:2}
.intro-copy{text-align:center;position:relative;z-index:4;padding-top:7px;pointer-events:none}
.eyebrow{display:block;font-size:7px;letter-spacing:1.7px;font-weight:500;line-height:12px}
h1{font-family:Snell,Georgia,serif;font-size:60px;font-weight:700;line-height:1.04;letter-spacing:-2px;margin:8px 0 3px;transform:rotate(-5deg)}
h1 span{letter-spacing:-6px;margin-left:1px}
.claim{font-size:19.5px;line-height:1.24;letter-spacing:-.7px;font-weight:700;margin:9px 0 0}
.gift-scene{position:absolute;left:0;right:0;top:146px;height:229px;perspective:800px;transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s}
.gift-object{position:absolute;left:31px;top:-2px;width:236px;height:230px;transform:translateY(calc(var(--pull) * -7px)) rotate(calc(var(--pull) * -2deg));transition:transform .12s linear;z-index:3}
.gift-photo{width:236px;height:230px;object-fit:contain;display:block;filter:drop-shadow(0 12px 12px #00000010)}
.gift-shadow{position:absolute;left:56px;bottom:0px;width:193px;height:18px;filter:blur(8px);border-radius:50%;background:#00000016}
.record-teaser{position:absolute;right:17px;top:17px;width:143px;height:143px;object-fit:contain;z-index:0;transform:rotate(calc(-26deg + var(--pull) * 110deg));opacity:.95;transition:transform .12s}
.note{position:absolute;object-fit:contain;z-index:5;filter:drop-shadow(0 2px 2px #00000015);pointer-events:none}
.note-one{left:13px;top:42px;transform:rotate(-17deg);animation:noteFloat 3s ease-in-out 4}
.note-two{right:9px;top:-5px;transform:rotate(16deg);animation:noteFloat 3.4s ease-in-out 4 .5s}
.gift-spark{position:absolute;pointer-events:none;font-family:Georgia,serif;font-weight:400}
.spark-one{left:2px;top:156px;font-size:29px;animation:twinkle 2.6s ease-in-out 4}
.spark-two{right:10px;top:96px;font-size:23px;animation:twinkle 2.6s ease-in-out 4 1s}
.stage-word{position:absolute;z-index:0;top:108px;left:8px;font-size:6px;font-weight:700;letter-spacing:2px;writing-mode:vertical-rl;transform:rotate(180deg);opacity:.55}
.unwrap{position:absolute;top:379px;left:23px;width:252px;text-align:center;z-index:7}
.unwrap>p{font-size:10px;font-weight:600;letter-spacing:-.1px;line-height:15px;margin:0 0 9px}
.ribbon-track{height:42px;width:252px;position:relative;background:#101010;overflow:visible;touch-action:none}
.ribbon-stripes{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#000 0 5px,#fff 5px 10px);clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%);opacity:.9}
.ribbon-fill{position:absolute;inset:0;background:#111;clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%);width:calc(49px + var(--pull)*203px)}
.track-label{position:absolute;inset:8px 0 8px 34px;margin:auto;background:#fff;display:flex;align-items:center;justify-content:center;gap:15px;padding:0 17px;font-size:9px;letter-spacing:1.7px;font-weight:700;white-space:nowrap;opacity:calc(1 - var(--pull))}
.track-label>span{font-family:Arial,sans-serif;font-size:18px;line-height:1}
.ribbon-handle{position:absolute;top:-2px;left:calc(-2px + var(--pull)*210px);height:46px;width:46px;border:1px solid #111;background:#111;color:white;display:grid;place-items:center;box-shadow:0 2px 5px #0002;cursor:grab;touch-action:none;z-index:2}
.ribbon-handle:active{cursor:grabbing}
.ribbon-handle svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tap-hint{font-size:7px;line-height:11px;color:#666;display:block;margin-top:5px;letter-spacing:.3px}
.ad-footer{position:absolute;z-index:8;bottom:0;left:0;right:0;height:61px;padding:0 22px;background:#fff}
.cta{height:40px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:#fff;text-decoration:none;font-size:10px;letter-spacing:1.1px;font-weight:700;transition:background .2s,transform .2s}
.cta:hover{background:#313131}
.cta:active{transform:scale(.985)}
.cta>svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.signature-stripes{position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(90deg,#0a0a0a 0 19px,#fff 19px 38px)}
.spotify-link{color:#333;font-size:7px;letter-spacing:.1px;line-height:12px;display:block;text-align:center;text-decoration:underline;text-underline-offset:2px;margin-top:5px}
.spotify-link>span{font-size:9px}
.reveal{position:absolute;inset:77px 0 0;z-index:3;background:white}
.film-frame{position:absolute;top:0;left:0;right:0;height:290px;background:#0a0a0a;overflow:hidden}
.film-poster{position:absolute;inset:0;background:#050505}
.film-poster img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}
.campaign-film{position:absolute;width:100%;height:100%;object-fit:cover;inset:0;opacity:0;transition:opacity .4s}
.campaign-film.is-ready{opacity:1}
.film-gradient{position:absolute;inset:0;background:linear-gradient(180deg,#0005 0,transparent 20%,transparent 58%,#0009 100%);pointer-events:none}
.film-kicker{position:absolute;left:15px;top:16px;letter-spacing:1.6px;font-size:7px;color:#fff;text-shadow:0 1px 4px #0009}
.sound-control{position:absolute;right:11px;top:10px;background:#0008;color:#fff;backdrop-filter:blur(3px)}
.sound-off{display:none}
.is-muted .sound-on{display:none}
.is-muted .sound-off{display:block}
.film-caption{position:absolute;bottom:19px;left:16px;right:12px;display:flex;align-items:center;gap:10px;color:white}
.film-caption strong{display:block;font-size:14px;font-weight:700;letter-spacing:.1px;line-height:19px}
.film-caption div>span{font-size:8px;letter-spacing:.6px;line-height:13px}
.play-control{margin-left:auto;color:#fff;background:#fff2;border:1px solid #ffffff50;width:30px;height:30px;padding:7px}
.play-control svg{stroke-width:2.3}
.play-icon{display:none;fill:currentColor!important;stroke-width:0!important}
.is-paused .pause-icon{display:none}
.is-paused .play-icon{display:block}
.now-playing{display:flex;width:22px;height:22px;gap:3px;align-items:center;justify-content:center}
.now-playing i{height:7px;width:2px;background:currentColor;border-radius:1px;animation:equalizer .75s ease-in-out infinite alternate}
.now-playing i:nth-child(2){height:18px;animation-delay:-.4s}
.now-playing i:nth-child(3){height:12px;animation-delay:-.2s}
.now-playing i:nth-child(4){height:9px;animation-delay:-.6s}
.is-paused .now-playing i,.is-muted .now-playing i{animation-play-state:paused}
.film-progress{position:absolute;left:16px;right:16px;bottom:6px;height:2px;background:#ffffff40}
.film-progress>span{display:block;height:100%;width:0;background:#fff;transition:width .2s linear}
.gift-discovery{position:absolute;top:307px;left:14px;right:14px;text-align:center}
.gift-discovery>.eyebrow{font-size:6px;letter-spacing:1.25px;line-height:10px}
.gift-discovery h2{font-size:25px;line-height:1.03;letter-spacing:-1px;font-weight:700;margin:10px 0 0;min-height:52px}
.gift-discovery h2 em{font-family:Snell,Georgia,serif;font-size:38px;letter-spacing:-1px;line-height:.9;font-weight:700;font-style:normal}
.discovery-copy{font-size:8px;line-height:12px;margin:9px 0 10px;color:#555;letter-spacing:-.1px;min-height:12px}
.categories{display:flex;gap:5px;justify-content:center}
.category{border:1px solid #ccc;background:#fff;color:#111;font-size:9px;letter-spacing:.25px;padding:8px 15px;min-width:77px;line-height:12px;transition:background .2s,color .2s,border-color .2s}
.category:hover{border-color:#111}
.category[aria-pressed=true]{background:#111;color:#fff;border-color:#111}
[data-scene=reveal] .ad-footer{height:67px;padding-top:0}
[data-scene=reveal] .cta{height:36px;font-size:9px;letter-spacing:.7px;gap:8px}
[data-scene=reveal] .signature-stripes{height:5px}
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:12}
.particle{position:absolute;left:50%;top:50%;width:5px;height:8px;background:#111;animation:confetti 1s ease-out forwards;animation-delay:var(--delay)}
.particle:nth-child(3n){background:#e954a3}
.particle:nth-child(3n + 1){background:#bfc9d5}
.opening .intro-copy{animation:copyOut .4s ease-in forwards}
.opening .gift-scene{transform:translateY(-24px) scale(1.14) rotate(-5deg);opacity:0}
.opening .unwrap{opacity:0;transition:opacity .2s}
.reveal.is-entering{animation:revealIn .6s cubic-bezier(.2,.7,.2,1) both}
.reveal.is-entering .gift-discovery{animation:discoveryIn .7s .2s both}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes noteFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes twinkle{0%,100%{opacity:.35;scale:.85}50%{opacity:1;scale:1.1}}
@keyframes equalizer{to{transform:scaleY(.3)}}
@keyframes confetti{to{transform:translate(var(--x),var(--y)) rotate(var(--rotation));opacity:0}}
@keyframes copyOut{to{opacity:0;transform:translateY(-16px)}}
@keyframes revealIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes discoveryIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}