/* Motion edition v5 — editorial motion, local/offline, no dependencies. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-ink:#171717}
@keyframes floatAmbient{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-22px,0)}}
@keyframes photoAppear{from{opacity:.32;transform:scale(1.075);filter:saturate(.65) blur(2px)}to{opacity:1;transform:scale(1);filter:saturate(1) blur(0)}}
@keyframes photoLeave{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.065)}}
@keyframes wordArrival{from{opacity:0;transform:translateY(24px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes sideArrival{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes softArrival{from{opacity:0;transform:translateY(13px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes borderGlow{0%,100%{box-shadow:0 0 0 0 rgba(124,57,78,.05)}55%{box-shadow:0 0 0 6px rgba(124,57,78,.03)}}
@keyframes waveGlow{0%,100%{opacity:.25}50%{opacity:.75}}
@keyframes eqJump{0%,100%{transform:scaleY(.28)}25%{transform:scaleY(.93)}55%{transform:scaleY(.38)}80%{transform:scaleY(.73)}}
@keyframes resultBurst{0%{opacity:0;transform:translate3d(0,0,0) scale(.6) rotate(0)}17%{opacity:1}100%{opacity:0;transform:translate3d(var(--tx),var(--ty),0) scale(1.15) rotate(var(--twist))}}
@keyframes markBreath{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}}
@keyframes rippleFade{from{transform:translate(-50%,-50%) scale(0);opacity:.22}to{transform:translate(-50%,-50%) scale(6);opacity:0}}
@keyframes progressGleam{from{background-position:160% 0}to{background-position:-160% 0}}

/* Intro releases the hero like a cinematic opening. */
.site-entered .hero .eyebrow{animation:wordArrival .9s .02s var(--motion-ease) both}
.site-entered .hero h1{animation:wordArrival 1.04s .12s var(--motion-ease) both}
.site-entered .hero>div:first-child>p{animation:wordArrival .9s .29s var(--motion-ease) both}
.site-entered .hero-actions{animation:wordArrival .85s .43s var(--motion-ease) both}
.site-entered .hero-card{animation:softArrival 1.05s .2s var(--motion-ease) both}
.site-entered #playerPanel{animation:softArrival .85s .56s var(--motion-ease) both}
.site-entered .topbar{animation:wordArrival .9s .04s var(--motion-ease) both}
.hero{isolation:isolate}
.hero::before{content:"";position:absolute;width:260px;height:260px;z-index:-1;left:-7%;top:8%;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(185,151,154,.12),transparent 72%);animation:floatAmbient 9s ease-in-out infinite}
.hero-card{transform-style:preserve-3d}
.hero-card .stack{transition:transform .9s var(--motion-ease);transform:perspective(1200px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg))}
.hero-card .shot{isolation:isolate;transition:box-shadow .6s var(--motion-ease)}
.hero-card .shot img{transition:transform 1s var(--motion-ease),filter .8s var(--motion-ease);will-change:transform}
.hero-card .shot:hover img{transform:scale(1.075);filter:saturate(1.1) contrast(1.055)}
.hero-card .shot:hover{box-shadow:0 20px 36px rgba(0,0,0,.14)}
.shot-label{transition:transform .55s var(--motion-ease),background .45s}
.shot:hover .shot-label{transform:translateY(-5px);background:#fff}
.note-card{transition:transform .7s var(--motion-ease);animation:markBreath 8s ease-in-out infinite}

/* Scroll reveals only begin once JS observer is ready, otherwise content stays accessible. */
.motion-ready .reveal{opacity:0;transform:translate3d(0,35px,0);filter:blur(6px);transition:opacity 1s var(--motion-ease),transform 1s var(--motion-ease),filter 1s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.is-visible{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}
.section-head h2{position:relative}
.divider{transform-origin:center;transition:opacity 1.1s,transform 1.3s var(--motion-ease)}
.motion-ready .divider:not(.is-visible){opacity:.15;transform:scaleX(.15)}
.motion-ready .divider.is-visible{opacity:1;transform:scaleX(1)}

/* Cinematic gallery photos. */
.viewer-frame{isolation:isolate}
.viewer-frame #mainPhoto{position:relative;z-index:1;backface-visibility:hidden}
.viewer-frame .photo-outgoing{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none;animation:photoLeave .78s var(--motion-ease) both}
.viewer-frame #mainPhoto.photo-incoming{animation:photoAppear .78s var(--motion-ease) both}
.viewer-frame .glow{z-index:3}
.viewer-frame .frame-meta{z-index:4}
.frame-meta strong,.frame-meta span{display:block}
.frame-meta.motion-swap strong{animation:wordArrival .64s .02s var(--motion-ease) both}
.frame-meta.motion-swap span{animation:wordArrival .72s .13s var(--motion-ease) both}
.thumb{transition:transform .5s var(--motion-ease),border-color .4s,box-shadow .5s var(--motion-ease);position:relative}
.thumb img{transition:transform .85s var(--motion-ease),filter .85s var(--motion-ease)}
.thumb:hover{transform:translateY(-7px);box-shadow:0 18px 28px #00000016}
.thumb:hover img{transform:scale(1.055)}
.thumb.active{box-shadow:0 0 0 1px #111,0 12px 24px #00000013}
.thumb.active:after{content:"";position:absolute;left:13px;right:13px;top:9px;height:2px;background:#fff;box-shadow:0 0 7px #fff;animation:waveGlow 2s infinite}
.terminal{transition:box-shadow .8s var(--motion-ease)}
.terminal:hover{box-shadow:0 17px 35px #00000021}

/* Cards feel tactile but not childish. */
.btn,.choice,.icon-btn,.pill,.playlist button,.navlink{transition:transform .34s var(--motion-ease),background .28s,color .28s,border-color .28s,box-shadow .34s var(--motion-ease)}
.btn:hover,.icon-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 17px 36px #00000023}
.btn:active,.choice:active,.icon-btn:active{transform:scale(.965)}
.choice:hover:not(.active){background:#f0efed;transform:translateY(-2px);border-color:#969691;box-shadow:0 8px 18px #0000000b}
.choice.active{box-shadow:0 7px 20px #00000020;transform:translateY(-2px)}
.choice.selected-pop{animation:softArrival .35s var(--motion-ease)}
.navlink{position:relative;border:0}
.navlink:after{content:"";height:1px;background:#111;position:absolute;left:0;right:0;bottom:0;transform:scaleX(.45);transform-origin:left;transition:transform .45s var(--motion-ease)}
.navlink:hover:after{transform:scaleX(1)}
.tap-target{position:relative;overflow:hidden}
.tap-wave{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(151,151,151,.55);pointer-events:none;left:var(--tap-x);top:var(--tap-y);z-index:20;animation:rippleFade .75s ease-out forwards}
input[type="text"],input[type="date"],input[type="time"],textarea{transition:background .35s,border-color .35s,box-shadow .35s}
input:focus,textarea:focus{border-color:#7e7b7b;background:#fff;box-shadow:0 0 0 4px rgba(0,0,0,.045);outline:0}

/* Quote and letter shift into view, with a gentle glint. */
.quote{position:relative;overflow:hidden}
.quote::before{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(125deg,transparent 35%,rgba(176,155,157,.12) 55%,transparent 76%);transform:translateX(-105%);transition:transform 2s var(--motion-ease)}
.quote.is-visible::before{transform:translateX(105%)}
.letter-panel{position:relative;isolation:isolate}
.letter-panel:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 90% 10%,rgba(163,111,125,.18),transparent 42%)}
.letter-mark{animation:markBreath 6s ease-in-out infinite}
.letter-signature{opacity:.85;transition:letter-spacing .6s var(--motion-ease)}
.letter-panel:hover .letter-signature{letter-spacing:.21em}
.invite-card .pill{position:relative}
.invite-card .pill:hover{background:#111;color:white;transform:translateY(-3px)}

/* Dynamic quiz steps and result, plus a crisp interactive timeline. */
.qstep:not([hidden]){animation:sideArrival .5s var(--motion-ease) both}
.qstep:not([hidden]) .choice{animation:softArrival .55s both;animation-delay:calc(var(--step-order,0)*55ms)}
.quiz-card .progress{height:6px;overflow:hidden}
.quiz-card #progressBar{background:linear-gradient(90deg,#111 0%,#555 50%,#111 100%);background-size:180% 100%;transition:width .6s var(--motion-ease);animation:progressGleam 4s linear infinite}
.result.show{position:relative;overflow:hidden;animation:softArrival .65s var(--motion-ease) both}
.result-spark{position:absolute;top:var(--sy);left:var(--sx);z-index:0;pointer-events:none;color:var(--spark-color);font-size:var(--size);animation:resultBurst 1.35s var(--motion-ease) forwards;animation-delay:var(--delay)}
.result>*:not(.result-spark){position:relative;z-index:1}

/* Soundtrack, but never blocks the form. */
.player{overflow:visible;transition:box-shadow .5s var(--motion-ease),border-color .5s}
.player:hover{box-shadow:0 25px 50px #00000017;border-color:#c1bfbb}
.player-timeline{display:flex;align-items:center;gap:9px;margin-top:14px;padding:2px 0 0;width:100%}
.timecode{font:11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;color:#7b7b7b;min-width:30px;font-variant-numeric:tabular-nums}
#audioSeek{appearance:none;-webkit-appearance:none;flex:1;min-width:30px;height:4px;cursor:pointer;border:0;border-radius:4px;outline-offset:6px;background:linear-gradient(to right,#191919 0 var(--played,0%),#d9d7d2 var(--played,0%) 100%)}
#audioSeek::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#151515;box-shadow:0 2px 5px #0004}
#audioSeek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#151515}
.audio-eq{height:23px;display:flex;align-items:center;gap:3px;margin-left:4px}
.audio-eq i{display:block;width:3px;height:16px;border-radius:3px;background:#252426;transform-origin:center;transform:scaleY(.25)}
.player.is-playing .audio-eq i{animation:eqJump 1s ease-in-out infinite}
.player.is-playing .audio-eq i:nth-child(2){animation-delay:-.3s}
.player.is-playing .audio-eq i:nth-child(3){animation-delay:-.65s}
.player.is-playing .audio-eq i:nth-child(4){animation-delay:-.45s}
.player.is-playing .audio-eq i:nth-child(5){animation-delay:-.15s}
.player.is-playing .player-caption{color:#222}
.playlist:not([hidden]){animation:softArrival .38s var(--motion-ease) both}
.playlist button:hover{transform:translateX(4px)}

/* Scroll position is the thin edge line, not an intrusive widget. */
.reading-progress{position:fixed;top:0;left:0;right:0;z-index:50;height:2px;pointer-events:none;opacity:0;transition:opacity .5s}
.site-entered .reading-progress{opacity:.75}
.reading-progress span{height:100%;width:100%;background:linear-gradient(90deg,#7f5664,#111);display:block;transform-origin:left;transform:scaleX(0)}

@media(hover:none),(pointer:coarse){.hero-card .stack{transform:none!important}.hero-card .shot:hover img{transform:none}}
@media(max-width:700px){
  .site-entered .hero-card{animation-delay:.18s}
  .motion-ready .reveal{transform:translate3d(0,20px,0);filter:blur(3px)}
  .player-timeline{gap:7px}
  .audio-eq{margin-left:0}
  .thumb:hover{transform:none}
  .letter-panel .letter-mark{animation-duration:12s}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .motion-ready .reveal{opacity:1!important;transform:none!important;filter:none!important}
  .motion-ready .divider{opacity:1!important;transform:none!important}
  .audio-eq i{animation:none!important}
  .hero-card .stack{transform:none!important}
  .tap-wave,.result-spark{display:none!important}
}