/* FLIP campaign header: a clear invitation, a curated product burst. */
.header { background:#c9000b; padding:22px 5.3%; min-height:92px; border-bottom:1px solid #ffffff20; }
.header .brand { width:126px; }
.header nav { gap:34px; font-size:14px; }
.header nav .nav-cta { border:1px solid #ffffff5c; border-radius:30px; padding:8px 19px; }
.flip-hero { position:relative; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:0 14px; padding:20px 5.3% 0; min-height:0; background:#c9000b; color:#fffaf1; overflow:hidden; isolation:isolate; }
.flip-hero::before { content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 77% 44%,#ff512950,transparent 53%),linear-gradient(140deg,transparent 40%,#71000840); }
.flip-hero .hero-copy { position:relative; z-index:3; padding:0 0 55px; min-width:0; }
.hero-opening { display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 12px/1.4 'DM Sans',Arial,sans-serif;margin-bottom:24px; }
.hero-opening > span:first-child { width:6px;height:6px;background:#fff6d6;border-radius:50%;box-shadow:0 0 0 4px #ffffff10; }
.hero-opening > span:last-child { margin-left:6px;font-size:17px; }
.flip-hero h1 { font:900 clamp(80px,7.9vw,126px)/.9 'Barlow Condensed','Arial Narrow',Impact,sans-serif;letter-spacing:-.025em;text-transform:uppercase;margin:0 0 28px; }
.flip-hero h1 span { display:block;color:inherit;white-space:nowrap; }
.flip-hero h1 span:last-child { font-size:1.14em; }
.flip-hero .hero-promise { font:700 21px/1.4 'DM Sans',Arial,sans-serif;letter-spacing:-.02em;margin:0 0 12px; }
.hero-intro { max-width:330px;font:400 16px/1.65 'DM Sans',Arial,sans-serif;color:#fff0e5;margin:0 0 30px; }
.flip-hero .button { gap:32px;background:#fffaf1;color:#251b18;border:0;padding:15px 23px;border-radius:3px;font-size:14px;font-weight:700;transition:background .2s,transform .2s; }
.flip-hero .button:hover { background:#fff;transform:translateY(-2px); }
.flip-hero .button svg { transition:transform .2s; }
.flip-hero .button:hover svg { transform:translateX(3px); }
.flip-hero a:focus-visible,.flip-hero button:focus-visible { outline:3px solid white;outline-offset:5px; }
.flip-art { position:relative;width:100%;aspect-ratio:.95;min-width:0;max-width:650px;perspective:1150px;margin:0 auto;--dx:0px;--dy:0px;--rx:0deg;--ry:0deg; }
.flip-scene { position:absolute;inset:1% 0 5% 0;transform-style:flat;transform:rotateX(calc(var(--rx)*.35)) rotateY(calc(var(--ry)*.35)); }
.flip-layer { position:absolute;aspect-ratio:1;z-index:var(--stack);transform:translate3d(calc(var(--dx)*var(--depth) + var(--avoid-x,0px)),calc(var(--dy)*var(--depth) + var(--avoid-y,0px)),0);transform-style:preserve-3d;perspective:1000px;pointer-events:none;transition:transform .42s cubic-bezier(.2,.8,.2,1); }
.flip-flight,.flip-float,.flip-pose { width:100%;height:100%;transform-style:preserve-3d; }
.flip-flight { animation:flip-launch 1.45s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--delay,0s); }
.flip-float { animation:flip-drift var(--duration,7s) ease-in-out infinite alternate;animation-delay:var(--phase,0s); }
.flip-pose { transform:rotateX(calc(var(--pitch) + var(--rx)*var(--turn-x))) rotateY(calc(var(--yaw) + var(--ry)*var(--turn-y))) rotateZ(var(--roll)); }
.flip-layer img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(3px 8px 7px #43000045); }
.flip-laptop { left:37%; top:33%; width:29%; aspect-ratio:535/485; --stack:7; --depth:.75; --pitch:-4deg; --yaw:-5deg; --roll:7deg; --turn-x:.15; --turn-y:.2; --delay:.4s; --sway:-3px; --bob:-3px; --angle:-1deg; --duration:8.3s; --phase:-2s; --launch-x:8px; --launch-y:40px; }
.flip-phone { left:5%; top:21%; width:14%; aspect-ratio:395/510; --stack:5; --depth:.7; --pitch:4deg; --yaw:6deg; --roll:-36deg; --turn-x:.2; --turn-y:-.2; --delay:.32s; --sway:-4px; --bob:-4px; --angle:2deg; --duration:6.8s; --phase:-1s; --launch-x:110px; --launch-y:85px; }
.flip-controller { left:68%; top:41%; width:15%; aspect-ratio:523/490; --stack:8; --depth:.9; --pitch:5deg; --yaw:-5deg; --roll:-29deg; --turn-x:.2; --turn-y:-.2; --delay:.48s; --sway:3px; --bob:-3px; --angle:2deg; --duration:8s; --phase:-4s; --launch-x:-30px; --launch-y:30px; }
.flip-tv { left:28%; top:2%; width:51%; aspect-ratio:1.55; --stack:1; --depth:.25; --pitch:-3deg; --yaw:5deg; --roll:-8deg; --turn-x:.15; --turn-y:.2; --delay:.08s; --sway:-3px; --bob:-4px; --angle:1deg; --duration:9.1s; --phase:-2s; --launch-x:35px; --launch-y:145px; }
.flip-vacuum { left:76%; top:6%; width:20%; height:56%; aspect-ratio:auto; --stack:4; --depth:.4; --pitch:3deg; --yaw:-5deg; --roll:14deg; --turn-x:-.15; --turn-y:.2; --delay:.16s; --sway:4px; --bob:-5px; --angle:1deg; --duration:8.8s; --phase:-4s; --launch-x:-50px; --launch-y:160px; }
.flip-coffee { left:12%; top:32%; width:25%; aspect-ratio:.82; --stack:4; --depth:.55; --pitch:3deg; --yaw:4deg; --roll:-12deg; --turn-x:.15; --turn-y:-.15; --delay:.24s; --sway:-4px; --bob:-3px; --angle:-1deg; --duration:7.7s; --phase:-1s; --launch-x:70px; --launch-y:70px; }
.flip-box { left:25%; top:50%; width:62%; aspect-ratio:556/499; --stack:3; --depth:.12; }
.flip-fan { left:2%; top:0%; width:23%; --stack:2; --depth:.32; --pitch:5deg; --yaw:-9deg; --roll:-22deg; --turn-x:.12; --turn-y:-.18; --delay:.2s; --sway:-3px; --bob:-5px; --angle:1.5deg; --duration:8.6s; --phase:-2.4s; --launch-x:125px; --launch-y:130px; }
.flip-speaker { left:67%; top:38%; width:20%; --stack:6; --depth:.68; --pitch:-6deg; --yaw:7deg; --roll:-20deg; --turn-x:-.14; --turn-y:.16; --delay:.36s; --sway:3px; --bob:-4px; --angle:-1.3deg; --duration:7.9s; --phase:-1.7s; --launch-x:-35px; --launch-y:65px; }
/* Two selections with the iPhone and headphones visible in both. Changing the selection gives the flip a purpose. */
.flip-hero:not([data-flipped="true"]) .flip-fan,.flip-hero:not([data-flipped="true"]) .flip-speaker,
.flip-hero[data-flipped="true"] .flip-controller { visibility:hidden; }
.flip-hero[data-flipped="true"] .flip-laptop { --roll:-4deg; }
.flip-tv .flip-pose::after { content:"SAMSUNG";position:absolute;top:43%;left:0;right:0;text-align:center;color:white;font:bold clamp(8px,.85vw,13px)/1 Arial,sans-serif;letter-spacing:.12em;text-shadow:0 1px 5px #0008; }
.flip-tv img { filter:saturate(.65) drop-shadow(3px 8px 7px #43000045); }
.flip-laptop img { filter:saturate(.75) drop-shadow(3px 8px 7px #43000045); }
.flip-box .flip-flight { position:relative;isolation:auto;animation:flip-box-arrive .8s cubic-bezier(.16,1,.3,1) both; }
.flip-layer .flip-box-art { position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(6px 21px 14px #5d000066); }
.flip-rays { position:absolute;z-index:-1;left:0;top:-80.16%;width:100%;height:180.16%;overflow:visible;pointer-events:none;opacity:.8; }
.flip-interior-light { position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none; }
.flip-interior-light > g { animation:flip-light-breathe 4s ease-in-out infinite alternate; }
.flip-art-glow { position:absolute;z-index:-1;inset:20% 0 0;pointer-events:none;background:radial-gradient(ellipse at 52% 56%,#ffa3510e,transparent 63%); }
.flip-tag { display:none; }
.flip-trigger { position:absolute;inset:0;z-index:12;border:0;padding:0;background:none;color:#fffaf1;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent; }
.flip-trigger:active { cursor:grabbing; }
.flip-trigger-label { position:absolute;left:0;bottom:10%;display:inline-flex;align-items:center;gap:12px;text-align:left; }
.flip-action-icon { display:grid;place-items:center;width:49px;height:49px;border:1px solid #fffaf170;border-radius:50%;background:#a5000926;transition:background .25s,transform .4s; }
.flip-trigger-copy { display:flex;flex-direction:column;gap:3px;font:600 13px/1.3 'DM Sans',Arial,sans-serif; }
.flip-gesture { font-size:11px;font-weight:400;color:#ffe9df; }
.flip-trigger:hover .flip-action-icon { transform:rotate(55deg);background:#ffffff16; }
.flip-trigger:focus-visible { outline:none!important; }
.flip-trigger:focus-visible .flip-trigger-label { outline:3px solid white;outline-offset:7px; }
.flip-hero[data-flipping="true"] .flip-trigger { cursor:progress; }
.hero-bottom { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ffffff30;min-height:70px;position:relative;z-index:15; }
.hero-bottom > p { margin:0;font-size:12px;color:#fff0e5; }
.hero-tools { display:flex;align-items:center;gap:26px; }
.flip-motion { display:none;align-items:center;min-height:44px;border:0;padding:8px 0;background:none;color:#fff0e5;font:400 11px/1.4 'DM Sans',Arial,sans-serif;cursor:pointer; }
.flip-hero[data-motion-ready] .flip-motion { display:inline-flex; }
.hero-scroll { width:44px;height:44px;display:grid;place-items:center;font-size:23px;border-left:1px solid #ffffff30; }
.flip-hero[data-paused="true"] .flip-float,.flip-hero[data-offscreen="true"] .flip-float,
.flip-hero[data-paused="true"] .flip-interior-light > g,.flip-hero[data-offscreen="true"] .flip-interior-light > g { animation-play-state:paused; }
.flip-hero[data-paused="true"] .flip-flight { animation:none; }
.flip-hero[data-reduced="true"] .flip-motion { display:none; }
.flip-hero[data-reduced="true"] .flip-flight,.flip-hero[data-reduced="true"] .flip-float { animation:none; }
.visually-hidden { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
@keyframes flip-drift { from{transform:translate3d(0,0,0) rotate(calc(var(--angle)*-.5))} to{transform:translate3d(var(--sway),var(--bob),5px) rotate(var(--angle))} }
@keyframes flip-launch { from{opacity:0;transform:translate(var(--launch-x,0px),var(--launch-y,90px)) scale(.12) rotate(-4deg)} to{opacity:1;transform:translateY(0) scale(1) rotate(0)} }
@keyframes flip-box-arrive { from{opacity:0;transform:translateY(28px) scale(.94)} to{opacity:1;transform:none} }
@keyframes flip-light-breathe { from{opacity:.55} to{opacity:.9} }
@media(min-width:1600px) { .flip-hero { padding-top:35px; }.flip-art{max-width:740px} }
@media(max-width:1100px) and (min-width:721px) {
 .flip-hero { grid-template-columns:.9fr 1.1fr;padding-top:40px;gap:0; }
 .flip-hero h1{font-size:clamp(66px,7.7vw,87px)}
 .flip-hero .hero-promise{font-size:18px}.hero-intro{max-width:280px;font-size:15px}
 .hero-opening{margin-bottom:18px}.flip-trigger-copy{font-size:12px}.flip-gesture{font-size:10px}.flip-action-icon{width:40px;height:40px}.flip-trigger-label{gap:8px;bottom:6%}
}
@media(max-width:720px) {
 .header { min-height:76px;padding:17px 22px;gap:20px; }
 .header .brand{width:100px}.header nav{gap:18px;font-size:12px}.header nav .nav-cta{padding:6px 13px}
 .flip-hero { grid-template-columns:1fr;padding:20px 22px 0;gap:0; }
 .flip-hero .hero-copy { padding:0; }
 .hero-opening { font-size:11px;min-height:30px;margin-bottom:15px; }
 .flip-hero h1 { font-size:clamp(58px,15.7vw,100px);line-height:.88;margin-bottom:18px; }
 .flip-hero h1 span:last-child{font-size:1.12em}
 .flip-hero .hero-promise{font-size:17px;margin-bottom:8px}.hero-intro{font-size:14px;line-height:1.55;max-width:330px;margin-bottom:18px}
 .flip-hero .button{min-height:46px;padding:12px 18px;gap:22px;font-size:13px}
 .flip-art { width:100%;max-width:460px;margin:12px auto 5px; }
 .flip-trigger-label{left:0;bottom:6%;gap:8px}.flip-action-icon{width:42px;height:42px}.flip-trigger-copy{font-size:12px}.flip-gesture{font-size:10px}
 .hero-bottom{min-height:60px;gap:12px}.hero-bottom > p{font-size:10px;max-width:180px;line-height:1.5}.hero-tools{gap:8px}.flip-motion{font-size:10px}.hero-scroll{display:none}
}
@media(prefers-reduced-motion:reduce) {
 .flip-flight,.flip-float,.flip-interior-light > g{animation:none!important}
 .flip-scene,.flip-layer,.flip-art-glow{transform:none!important}
 .flip-motion{display:none!important}.flip-action-icon,.flip-hero .button,.flip-hero .button svg{transition:none}
}
/* Short, ordered entrance. Interaction motion is orchestrated in hero.js. */
.hero-copy > * { animation:flip-copy-enter .7s cubic-bezier(.2,.8,.2,1) both; }
.hero-copy h1 { animation-delay:.08s; }.hero-copy .hero-promise{animation-delay:.14s}.hero-copy .hero-intro{animation-delay:.2s}.hero-copy .button{animation-delay:.26s}
@keyframes flip-copy-enter { from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)} }
@media(max-width:720px) { .hero-intro{font-size:16px} }
@media(prefers-reduced-motion:reduce) { .hero-copy > *{animation:none!important} }

.header nav a { display:inline-flex;align-items:center;min-height:44px; }
.header .brand { min-height:44px;display:flex;align-items:center; }
@media(max-width:720px) { .flip-art{margin-bottom:32px}.flip-trigger-label{left:50%;bottom:-4%;transform:translateX(-50%);white-space:nowrap} }

/* A readable reverse face avoids a mirrored brand during the turn. */
.flip-box-art,.flip-interior-light { backface-visibility:hidden; }
.flip-layer .flip-box-reverse { position:absolute;z-index:0;inset:0;width:100%;height:auto;transform:rotateY(180deg);backface-visibility:hidden;filter:drop-shadow(6px 21px 14px #5d000066); }
@media(max-width:720px) { .flip-art{margin-bottom:64px}.flip-trigger-label{top:calc(100% + 8px);bottom:auto} }
.flip-box-art { transform:translateZ(.2px); }
.flip-interior-light { transform:translateZ(.3px); }
.flip-layer .flip-box-reverse { transform:rotateY(180deg) translateZ(.2px); }

/* Headphones sit above the opening with their own silhouette and motion. */
.flip-headphones { left:63%; top:24%; width:17%; aspect-ratio:506/510; --stack:6; --depth:.6; --pitch:-4deg; --yaw:-6deg; --roll:19deg; --turn-x:-.15; --turn-y:.2; --delay:.3s; --sway:2px; --bob:-4px; --angle:-2deg; --duration:7.1s; --phase:-3s; --launch-x:0px; --launch-y:90px; }

/* A single entrance per browsing session, followed by independent product float. */
.flip-flight,.flip-float,.flip-interior-light>g,.hero-copy>* { animation:none!important; }
.flip-hero[data-intro="loading"] .flip-flight { opacity:0; }
.flip-art { touch-action:pan-y; cursor:default; }
@media(max-width:720px) { .flip-art { margin-bottom:8px; } }

/* Each product inherits its own direction, period and phase. The box stays grounded. */
.flip-hero .flip-float {
  animation:flip-hover var(--duration,8s) ease-in-out var(--phase,0s) infinite!important;
}
@keyframes flip-hover {
  0%,100% { transform:translate3d(calc(var(--sway)*-.5),calc(var(--bob)*-.7),0) rotate(calc(var(--angle)*-.3)); }
  50% { transform:translate3d(var(--sway),calc(var(--bob)*1.5),0) rotate(calc(var(--angle)*.3)); }
}
.flip-hero[data-intro="loading"] .flip-float,
.flip-hero[data-intro="playing"] .flip-float,
.flip-hero[data-offscreen="true"] .flip-float,
.flip-hero[data-page-hidden="true"] .flip-float { animation-play-state:paused!important; }
.flip-hero[data-reduced="true"] .flip-float { animation:none!important; }
@media(prefers-reduced-motion:reduce) {
  .flip-hero .flip-float { animation:none!important; }
}