/* Campaign motion, v2. All decorative movement has a static fallback. */
.motion-letter{display:inline-block;transform-origin:50% 100%;backface-visibility:hidden}
.motion-designed.motion-ready #page-title>span,
.motion-designed.motion-ready .campaign-title b{animation:none}
.motion-designed #page-title>span{perspective:900px}
.motion-designed.motion-ready .motion-letter{animation:letter-roll 1.05s cubic-bezier(.16,1,.3,1) var(--letter-delay) both}
@keyframes letter-roll{0%{transform:translate3d(0,115%,0) rotateX(-88deg) rotateZ(8deg);opacity:0;filter:blur(6px)}70%{opacity:1;filter:blur(0)}100%{transform:translate3d(0,0,0) rotateX(0) rotateZ(0);opacity:1;filter:blur(0)}}
.motion-designed.motion-ready .campaign-photo{animation:photo-aperture 1.65s cubic-bezier(.16,1,.3,1) both;transform:translateY(var(--hero-photo-drift,0px))}
.motion-designed.motion-ready .campaign-photo img{animation:lens-arrive 1.9s cubic-bezier(.16,1,.3,1) both}
@keyframes photo-aperture{from{clip-path:inset(8% 0 12% 40%);opacity:.25}to{clip-path:inset(0);opacity:1}}
@keyframes lens-arrive{from{transform:scale(1.25);filter:saturate(.4)}to{transform:scale(1.08);filter:saturate(1)}}
.motion-designed.motion-ready .campaign::before{content:'';position:absolute;z-index:1;pointer-events:none;top:0;bottom:0;width:2px;background:linear-gradient(transparent,var(--gold),transparent);animation:light-cut 1.35s .1s cubic-bezier(.22,.65,.28,1) both}
@keyframes light-cut{0%{left:35%;opacity:0}25%{opacity:.8}85%{opacity:.5}100%{left:100%;opacity:0}}
.motion-designed.motion-ready .campaign-content{transform:translateY(calc(var(--hero-lift,0px) * -1));opacity:var(--hero-fade,1);will-change:transform}
.motion-designed.motion-ready .campaign-title>span:nth-child(1){transform:translateX(calc(var(--hero-spread,0px) * -1))}
.motion-designed.motion-ready .campaign-title>span:nth-child(2){transform:translateX(var(--hero-spread,0px))}
.motion-designed.motion-ready .campaign-title>span:nth-child(3){transform:translateX(calc(var(--hero-spread,0px) * -.4))}
.motion-designed.motion-ready .campaign .eyebrow{animation:editorial-in .9s .22s var(--ease) both}
.motion-designed.motion-ready .campaign-tagline{animation:editorial-in .9s .7s var(--ease) both}
.motion-designed.motion-ready .campaign .primary{animation:editorial-in .9s .8s var(--ease) both}
.motion-designed.motion-ready .campaign-foot{animation:editorial-in .8s 1s var(--ease) both}
@keyframes editorial-in{from{opacity:0;transform:translateY(30px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
.replay-entrance{background:transparent;border:0;padding:12px;color:#d1dce9;font:10px/1.5 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;display:flex;gap:12px;align-items:center}.replay-entrance span{font-size:19px;transition:transform .5s}.replay-entrance:hover span{transform:rotate(180deg)}
/* Larger staged section entrances, still one-time and native-scroll driven. */
.motion-designed.motion-ready [data-reveal]{transition:opacity .9s var(--ease) var(--delay,0ms),transform 1.1s cubic-bezier(.16,1,.3,1) var(--delay,0ms),filter .9s var(--ease)}
.motion-designed.motion-ready .section-heading.reveal-pending{transform:translateY(65px) rotateX(18deg);filter:blur(4px)}
.motion-designed.motion-ready .section-heading.revealed{filter:blur(0)}
.motion-designed.motion-ready .editorial.reveal-pending{opacity:1;transform:translateY(75px)}
.motion-designed.motion-ready .editorial .photo-window img{transition:clip-path 1.3s cubic-bezier(.16,1,.3,1) var(--delay,0ms),transform 1.4s cubic-bezier(.16,1,.3,1)}
.motion-designed.motion-ready .editorial.reveal-pending .photo-window img{clip-path:inset(100% 0 0 0);transform:scale(1.22)}
.motion-designed.motion-ready .editorial.revealed .photo-window img{clip-path:inset(0)}
.motion-designed.motion-ready .editorial-detail .image-link{display:block;transform:translateY(var(--card-lift,0px)) rotate(var(--card-roll,0deg));transform-origin:center}
.photo-window{perspective:1100px;isolation:isolate;transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s;transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.photo-window.pointer-active{transition:transform .16s ease-out,box-shadow .5s;box-shadow:0 25px 65px #0006}
.photo-window::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--light-x,50%) var(--light-y,50%),#fff2,transparent 65%);transition:opacity .45s;mix-blend-mode:screen}
.photo-window.pointer-active::after{opacity:1}
.type-interlude{position:relative;overflow:hidden;padding:35px 0 45px;margin:0 0 35px;isolation:isolate;user-select:none}
.type-track{font:400 clamp(70px,10vw,170px)/1.05 Anton,Impact,sans-serif;letter-spacing:-.015em;white-space:nowrap;width:max-content;color:var(--white);opacity:.92}
.type-track span{-webkit-text-stroke:1px #8b9cb4;color:transparent}
.track-one{margin-left:-4%;transform:translateX(var(--type-travel,0px))}
.track-two{margin-left:-19%;transform:translateX(calc(var(--type-travel,0px) * -1));opacity:.5}
.interlude-star{position:absolute;left:72%;top:37%;color:var(--gold);font:90px/1 Arial,sans-serif;transform:rotate(var(--star-turn,0deg));text-shadow:0 0 30px #081424;background:#091729;border-radius:50%;padding:8px}
.motion-designed.motion-ready .story-photo img{transition:clip-path 1.2s cubic-bezier(.16,1,.3,1),transform 1.5s var(--ease)}
.motion-designed.motion-ready .story-photo.reveal-pending img{clip-path:inset(0 0 100% 0);transform:scale(1.7) rotate(-5deg)}
.motion-designed.motion-ready .story-photo.revealed img{clip-path:inset(0);transform:scale(1.4) rotate(0)}
.motion-designed.motion-ready .small-star,.motion-designed.motion-ready .curious-teaser h2>span{transform:rotate(var(--star-turn,0deg));transform-origin:50% 45%}
.motion-designed.motion-ready .teaser-grid>[data-reveal].reveal-pending{transform:translateY(60px) rotate(-3deg)}
.motion-designed.motion-ready .scene{animation:curious-aperture 1.6s cubic-bezier(.16,1,.3,1) both;translate:0 var(--scene-drift,0px)}
@keyframes curious-aperture{from{clip-path:inset(0 0 0 100%);opacity:.4}to{clip-path:inset(0);opacity:1}}
.motion-designed.motion-ready .curious-page .intro{perspective:900px}
.motion-designed.motion-ready .signup{animation:editorial-in .9s .65s var(--ease) both}
.motion-designed.motion-ready .confirmation:not([hidden]){animation:confirm-in .65s cubic-bezier(.16,1,.3,1) both}
@keyframes confirm-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.motion-designed.motion-ready dialog[open]{animation:confirm-in .45s var(--ease) both}
/* Magnetic response is bounded; the surface remains a normal keyboard-focusable link. */
.primary{position:relative;overflow:hidden;isolation:isolate;translate:var(--button-x,0px) var(--button-y,0px);transition:translate .3s var(--ease),background .3s,box-shadow .3s}
.primary::before{content:'';position:absolute;inset:-60% -10%;background:#fff4;transform:translateX(-120%) rotate(-20deg);z-index:-1;transition:transform .6s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.motion-ready .primary:hover::before{transform:translateX(0) rotate(-20deg)}.motion-ready .primary:hover{box-shadow:0 9px 35px #fecb4120}.motion-ready .image-link:hover .image-label span{transform:translate(4px,-4px) rotate(45deg)}}
/* Native page wipe; unsupported browsers retain ordinary link navigation. */
::view-transition-old(root){animation:page-recede .7s cubic-bezier(.7,0,.2,1) both}
::view-transition-new(root){animation:page-unfold .85s cubic-bezier(.7,0,.2,1) both}
@keyframes page-recede{to{transform:scale(.97);filter:brightness(.6)}}
@keyframes page-unfold{from{clip-path:polygon(0 100%,100% 85%,100% 100%,0 100%);transform:translateY(35px)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:none}}
@media(max-width:760px){
.motion-designed.motion-ready .motion-letter{animation-duration:.85s}
.motion-designed.motion-ready .campaign-photo{animation:mobile-aperture 1.35s .2s var(--ease) both;transform:none}
.motion-designed.motion-ready .campaign-photo img{animation:mobile-lens 1.7s .2s var(--ease) both}
@keyframes mobile-aperture{from{clip-path:inset(0 0 100% 0);opacity:.4}to{clip-path:inset(0);opacity:1}}
@keyframes mobile-lens{from{transform:scale(1.12)}to{transform:scale(1)}}
.motion-designed.motion-ready .campaign::before{display:none}
.campaign-foot{flex-wrap:wrap;row-gap:0}.replay-entrance{font-size:8px;padding:8px 0;gap:7px}.replay-entrance span{font-size:15px}.campaign-foot>a{gap:7px}
.type-interlude{padding:18px 0 24px;margin-bottom:10px}.type-track{font-size:17vw}.interlude-star{font-size:45px;top:29%;padding:5px;left:70%}
.motion-designed.motion-ready .editorial-detail .image-link{transform:none}
.motion-designed.motion-ready .story-photo.revealed img{transform:scale(1.3)}
}
/* Pause and preference changes must reveal everything immediately, without residual transforms. */
.motion-paused .motion-letter,.motion-paused .campaign-content,.motion-paused .campaign-title>span,.motion-paused .track-one,.motion-paused .track-two,.motion-paused .interlude-star,.motion-paused .small-star,.motion-paused .curious-teaser h2>span,.motion-paused .editorial-detail .image-link,.motion-paused .photo-window{transform:none!important;opacity:1;filter:none}
.motion-paused .primary,.motion-paused .scene{translate:none!important}
.motion-paused .photo-window img,.motion-paused .story-photo img{clip-path:none!important}
.motion-paused .photo-window::after{opacity:0!important}
.motion-paused .campaign::before{display:none}
@media(prefers-reduced-motion:reduce){.type-track,.interlude-star,.photo-window{transform:none!important}.primary,.scene{translate:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
.small-star{width:40px}
.motion-designed.motion-ready .editorial-detail .editorial-note{transform:translateY(var(--card-lift,0px)) rotate(var(--card-roll,0deg));transform-origin:center}
.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}
.motion-paused .editorial-detail .editorial-note{transform:none!important}
@media(max-width:760px){.motion-designed.motion-ready .editorial-detail .editorial-note{transform:none}}
/* Registered foreground/background planes. Original photographs remain the load/error fallback. */
.depth-stack{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s;isolation:isolate}
.depth-stack.depth-ready{opacity:1}
.depth-plane{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.depth-plane img{display:block;width:100%;height:100%;object-fit:cover}
.depth-background{transform:translate3d(var(--depth-back-x,0px),var(--depth-back-y,0px),0) scale(1.22)}
.depth-foreground{transform:translate3d(var(--depth-front-x,0px),var(--depth-front-y,0px),0) scale(1.09);filter:drop-shadow(0 3px 5px #0002)}
/* Alpha-derived cast and contact shadows stay registered to the moving subject.
   The light comes from upper right, so the wall receives a soft shadow to the left. */
[data-depth="model"] .depth-foreground{filter:drop-shadow(-26px 12px 7px rgba(0,5,16,.64)) drop-shadow(-3px 2px 2px rgba(0,5,16,.4))}
.depth-fallback{transition:opacity .4s}
.depth-noscript{position:absolute;inset:0}
.depth-loaded>.depth-fallback{opacity:0!important}
.scene .depth-stack,.campaign-photo .depth-stack{transform-origin:50% 0%}
.campaign-photo .depth-background{transform-origin:50% 0%}
.campaign-photo .depth-foreground{transform-origin:50% 0%;filter:none}
.story-photo,.mobile-portrait{position:relative}
.motion-paused .depth-plane{transform:none!important;will-change:auto}
@media(prefers-reduced-motion:reduce){.depth-plane{transform:none!important;will-change:auto}.depth-stack{transition:none}}
/* Register the cat cutout to the original photographic framing. */
[data-depth="cat"] .depth-foreground img{scale:.78;translate:-3% -7%}
/* The wide newsletter scene needs the complete foreground canvas, including paws. */
.scene [data-depth="cat"] .depth-foreground img{object-fit:contain;object-position:100% 50%;transform:none;scale:1;translate:0 -10%}
@media(max-width:760px){[data-depth="model"] .depth-foreground{filter:drop-shadow(-14px 7px 4px rgba(0,5,16,.64)) drop-shadow(-2px 1px 1px rgba(0,5,16,.4))}}
