@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out .24s ease both}
::view-transition-new(root){animation:page-in .48s cubic-bezier(.22,1,.36,1) both}
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
body{animation:page-in .7s var(--motion-ease) both}
.reveal{opacity:1;transform:none}
.motion-ready .reveal{opacity:0;transform:translate3d(0,30px,0);transition:opacity .85s var(--motion-ease),transform .85s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.visible{opacity:1;transform:translate3d(0,0,0)}
.event-hero h1{animation:title-in .9s .08s var(--motion-ease) both}
.event-portrait{animation:portrait-in 1.15s .15s var(--motion-ease) both}
.brand{transition:opacity .25s,transform .35s var(--motion-ease)}
.brand:hover{opacity:.75;transform:translateY(-2px)}
.back-home{z-index:10;pointer-events:auto;min-height:44px;display:inline-flex;align-items:center;transition:background .25s,transform .35s var(--motion-ease)}
.back-home:hover{transform:translateX(-4px)}
.venue a{transition:color .25s;text-decoration-thickness:1px;text-underline-offset:4px}
.venue a:hover{color:#f3d28b}
.event-card{transition:transform .45s var(--motion-ease),box-shadow .45s var(--motion-ease);transform-style:preserve-3d}
.motion-ready .event-card.visible{transform:perspective(850px) translateY(var(--card-lift,0px)) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.event-card h3,.event-card .decoration{transition:translate .45s var(--motion-ease)}
.invitation-video{transform:scale(1.08) translate3d(0,var(--video-offset,0px),0)}
@media(hover:hover) and (pointer:fine){.event-card:hover{--card-lift:-9px;box-shadow:0 22px 55px #0006}.event-card:hover h3{translate:0 -3px}.event-card:hover .decoration{translate:0 3px}}
@keyframes page-in{from{opacity:0}to{opacity:1}}
@keyframes page-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes title-in{from{opacity:0;transform:translateY(20px);letter-spacing:5px}to{opacity:1;transform:none;letter-spacing:0}}
@keyframes portrait-in{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body,.event-hero h1,.event-portrait{animation:none!important}.motion-ready .reveal{opacity:1;transform:none;transition:none!important}.motion-ready .event-card.visible,.invitation-video{transform:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}

.back-home:focus-visible{outline:2px solid #f3d28b;outline-offset:4px}

/* Warm metallic accents and a gentle pointer-following light. */
.event-page{--invitation-gold:#edcf93}
.event-hero h1{color:#fff0cf;text-shadow:0 3px 24px #edcf9338;letter-spacing:.04em}
.event-portrait{border:1px solid #edcf9366;box-shadow:0 18px 55px #0005;transition:translate .6s var(--motion-ease),box-shadow .6s var(--motion-ease)}
.invitation-inner{border-radius:18px;background:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,35%),#edcf9314,transparent 45%),linear-gradient(145deg,#1b171b70,#15151d94);box-shadow:0 18px 65px #0004;transition:transform .65s var(--motion-ease),box-shadow .65s var(--motion-ease)}
.invitation-inner:before,.invitation-inner:after{border-color:var(--invitation-gold);border-radius:18px}
.invite-intro{line-height:1.9}
.invite-intro strong{color:#fff0d0}
.invite-name{color:#ffe5b2;text-shadow:0 2px 16px #edcf9326;transition:color .35s,text-shadow .35s}
.with{color:var(--invitation-gold);letter-spacing:.2em}
.date-side{border-color:#edcf9380}
.date-number strong{color:#ffe5b2}
.invitation-corner{filter:drop-shadow(0 8px 12px #0004);transition:translate .8s var(--motion-ease)}
.venue a:focus-visible{outline:2px solid var(--invitation-gold);outline-offset:5px;border-radius:3px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .invitation-inner.pointer-active{transform:perspective(1400px) rotateX(var(--surface-x,0deg)) rotateY(var(--surface-y,0deg));box-shadow:0 24px 75px #0006,0 0 35px #edcf9310}
  .pointer-active .invitation-corner-top{translate:var(--flower-x,0px) var(--flower-y,0px)}
  .pointer-active .invitation-corner-bottom{translate:calc(-1 * var(--flower-x,0px)) calc(-1 * var(--flower-y,0px))}
  .event-hero.pointer-active .event-portrait{translate:var(--flower-x,0px) var(--flower-y,0px);box-shadow:0 24px 65px #0006,0 0 30px #edcf9320}
  .invite-name:hover{color:#fff6df;text-shadow:0 0 22px #edcf9370}
}
@media(prefers-reduced-motion:reduce){.invitation-inner,.invitation-corner,.event-portrait{transform:none!important;translate:none!important;transition:none!important}}