:root{color-scheme:dark;--duration:3.6s}
*{box-sizing:border-box}
html,body{height:100%;width:100%;margin:0}
body{overflow:hidden;background:#170a11;color:#fff4f1;font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid #ffe1e9;outline-offset:4px}
[hidden]{display:none!important}
.experience{position:relative;width:100%;height:100vh;height:100dvh;min-height:320px;overflow:hidden;isolation:isolate;background:#13080d}
.slideshow,.slide,.slide-backdrop,.slide-photo,.slide-shade,.film-grain{position:absolute;inset:0}
.slideshow{opacity:0;transition:opacity 1.25s ease}
.experience.film-started .slideshow{opacity:1}
.slide{opacity:0;overflow:hidden;transition:opacity .6s ease}
.slide.active{opacity:1;z-index:2}
.slide.outgoing{z-index:1}
.slide-backdrop{width:100%;height:100%;object-fit:cover;transform:scale(1.14);filter:blur(36px) brightness(.55) saturate(.83)}
.slide-photo{width:100%;height:100%;object-fit:contain;object-position:center;transform:scale(1.015)}
.slide.active .slide-photo{animation:photo-drift var(--duration) linear both}
.slide:nth-child(even).active .slide-photo{animation-name:photo-drift-alt}
@keyframes photo-drift{from{transform:scale(1.015) translate3d(-.4%,.2%,0)}to{transform:scale(1.065) translate3d(.4%,-.2%,0)}}
@keyframes photo-drift-alt{from{transform:scale(1.065) translate3d(.3%,-.2%,0)}to{transform:scale(1.015) translate3d(-.3%,.2%,0)}}
.slide-shade{pointer-events:none;background:linear-gradient(180deg,rgba(12,4,9,.16),transparent 45%,rgba(12,4,9,.55))}
.film-grain{z-index:3;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}
.caption{position:absolute;z-index:5;left:clamp(30px,7vw,120px);right:clamp(30px,7vw,120px);bottom:clamp(74px,12vh,130px);max-width:850px;margin:0;font-size:clamp(25px,3.3vw,53px);font-weight:400;line-height:1.5;letter-spacing:.11em;text-shadow:0 3px 25px rgba(0,0,0,.85);transition:opacity .45s,transform .45s}
.caption.changing{opacity:0;transform:translateY(12px)}
.progress{position:absolute;z-index:5;left:clamp(30px,7vw,120px);right:clamp(30px,7vw,120px);bottom:max(27px,env(safe-area-inset-bottom));height:2px;display:flex;gap:7px;opacity:0;transition:opacity .7s}
.experience.film-started .progress{opacity:.7}
.progress span{position:relative;flex:1;background:rgba(255,236,239,.38);overflow:hidden}
.progress span::after{content:"";position:absolute;inset:0;background:#ffe8ed;transform:scaleX(0);transform-origin:left}
.progress span.done::after{transform:scaleX(1)}
.progress span.active::after{animation:progress-fill var(--duration) linear forwards}
@keyframes progress-fill{to{transform:scaleX(1)}}
.opening{position:absolute;z-index:10;inset:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#522430 0%,#2d111d 34%,#170a11 67%,#0b060a 100%);transition:opacity 1.15s ease,visibility 1.15s}
.opening.finished{opacity:0;visibility:hidden;pointer-events:none}
.ambient{position:absolute;border-radius:50%;filter:blur(65px);pointer-events:none}
.ambient-one{width:45vw;height:45vw;left:-18vw;top:-24vw;background:rgba(224,98,130,.18)}
.ambient-two{width:34vw;height:34vw;right:-12vw;bottom:-20vw;background:rgba(206,87,122,.12)}
.rose-scene{position:relative;z-index:1;width:min(55vw,58vh,650px);aspect-ratio:1;transform:translateY(-7%);filter:drop-shadow(0 22px 44px rgba(10,0,8,.4))}
.rose-scene::before{content:"";position:absolute;inset:11%;border-radius:50%;background:rgba(247,144,171,.25);filter:blur(70px)}
.rose-core,.rose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.rose-core{clip-path:circle(23% at 50% 48%);opacity:0;transform:scale(.58) rotate(-8deg);animation:core-open 2.2s cubic-bezier(.16,.65,.2,1) .15s forwards}
.rose{opacity:0;transform:scale(.6) rotate(-7deg);filter:blur(7px);animation:rose-open 3.4s cubic-bezier(.16,.72,.15,1) .48s forwards}
@keyframes core-open{20%{opacity:1}to{opacity:1;transform:scale(.91) rotate(0)}}
@keyframes rose-open{15%{opacity:.15}44%{opacity:.77;filter:blur(2px)}to{opacity:1;transform:scale(1) rotate(1deg);filter:blur(0)}}
.petal-field{position:absolute;inset:-22%;pointer-events:none}
.petal{position:absolute;left:var(--left);top:var(--top);width:clamp(35px,5.4vw,83px);aspect-ratio:1.5;background:url('assets/rose/pink-petal.webp') center/contain no-repeat;opacity:0;filter:drop-shadow(0 8px 11px rgba(0,0,0,.23));animation:petal-float var(--time) ease-in-out var(--delay) both}
@keyframes petal-float{0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--start-rot)) scale(.7)}18%{opacity:var(--opacity)}70%{opacity:var(--opacity)}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) rotate(var(--end-rot)) scale(1.05)}}
.opening-title{position:absolute;z-index:3;top:72%;left:16px;right:16px;margin:0;text-align:center;font-size:clamp(35px,4.8vw,76px);font-weight:400;letter-spacing:.2em;text-indent:.2em;color:#ffe3e8;text-shadow:0 2px 28px rgba(6,1,6,.75);opacity:0;animation:title-in 1.5s ease .8s forwards;transition:opacity .65s,transform .65s}
@keyframes title-in{to{opacity:1}}
.opening.counting .opening-title{opacity:0!important;transform:translateY(-15px);animation:none}
.opening.counting .rose-scene{opacity:.24;filter:blur(10px);transition:opacity 1s,filter 1s}
.countdown{position:absolute;z-index:4;inset:0;display:grid;place-items:center;font:200 clamp(180px,26vw,380px)/1 Georgia,"Times New Roman",serif;color:#fff3f5;text-shadow:0 0 65px rgba(249,153,179,.45);pointer-events:none}
.countdown.tick{animation:count-tick .88s cubic-bezier(.16,.72,.2,1) both}
@keyframes count-tick{from{opacity:0;transform:scale(1.15);filter:blur(12px)}22%{opacity:1;filter:blur(0)}to{opacity:.82;transform:scale(.91)}}
@media(max-width:700px){.rose-scene{width:min(88vw,49vh);transform:translateY(-17%)}.opening-title{top:66%;font-size:clamp(33px,9vw,52px)}.caption{left:24px;right:24px;bottom:max(78px,calc(env(safe-area-inset-bottom) + 64px));font-size:clamp(24px,6.5vw,37px);letter-spacing:.08em}.progress{left:24px;right:24px;bottom:max(25px,env(safe-area-inset-bottom))}.slide-photo{object-fit:cover;object-position:center 42%}.slide-backdrop{display:none}.countdown{font-size:clamp(165px,48vw,260px)}}
@media(max-height:520px){.rose-scene{width:min(46vw,61vh);transform:translateY(-9%)}.opening-title{top:73%;font-size:clamp(27px,4vw,45px)}.caption{bottom:65px;font-size:clamp(23px,3vw,37px)}}
@media(prefers-reduced-motion:reduce){.rose-core,.rose,.opening-title{animation-duration:.01ms!important;animation-delay:0ms!important}.petal{display:none}.slide.active .slide-photo{animation:none}.progress span.active::after{animation-duration:.01ms}}

/* A quiet, luminous background lives at the edges of the photographs. */
.experience{
  background:
    radial-gradient(ellipse at 12% 86%,rgba(60,88,144,.25),transparent 40%),
    radial-gradient(ellipse at 84% 19%,rgba(167,69,125,.18),transparent 43%),
    linear-gradient(145deg,#080e1d 0%,#111023 54%,#090b17 100%);
}
.slide-backdrop{filter:blur(48px) brightness(.32) saturate(.72);opacity:.72}
.slide-shade{
  background:linear-gradient(180deg,rgba(5,10,24,.12),transparent 39%,rgba(5,9,22,.34) 100%);
}
.tech-field{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.5s ease}
.film-started .tech-field{opacity:1}
.tech-field::before{
  content:"";position:absolute;inset:-3%;opacity:.58;
  background:
    radial-gradient(1px 1px at 7% 13%,#dce9ff 98%,transparent),
    radial-gradient(1px 1px at 13% 59%,#f5c8e2 98%,transparent),
    radial-gradient(1.5px 1.5px at 21% 89%,#bed9ff 98%,transparent),
    radial-gradient(1px 1px at 79% 12%,#e4dcff 98%,transparent),
    radial-gradient(1px 1px at 87% 48%,#a9d9ff 98%,transparent),
    radial-gradient(1.5px 1.5px at 94% 79%,#f6d3e7 98%,transparent),
    radial-gradient(1px 1px at 43% 96%,#adcdec 98%,transparent);
  filter:drop-shadow(0 0 7px rgba(194,212,255,.8));
  mask-image:radial-gradient(ellipse 72% 75% at 50% 48%,transparent 28%,#000 100%);
  animation:star-breathe 9s ease-in-out infinite alternate;
}
.tech-field::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 33% 48% at 0% 95%,rgba(65,150,211,.13),transparent 85%),
    radial-gradient(ellipse 38% 48% at 100% 3%,rgba(243,111,174,.10),transparent 86%);
  mask-image:radial-gradient(ellipse 69% 70% at 50% 48%,transparent 30%,#000 100%);
}
.tech-orbit{
  position:absolute;display:block;width:min(66vw,740px);aspect-ratio:1;border:1px solid rgba(159,198,239,.16);border-radius:50%;
  box-shadow:inset 0 0 35px rgba(110,170,230,.035),0 0 27px rgba(129,184,231,.05);
}
.tech-orbit-one{left:-37vw;bottom:-47vw;transform:rotate(-18deg);animation:orbit-drift 18s ease-in-out infinite alternate}
.tech-orbit-two{right:-36vw;top:-47vw;border-color:rgba(233,158,198,.15);animation:orbit-drift 22s ease-in-out infinite alternate-reverse}
.tech-beam{
  position:absolute;bottom:13%;left:-10%;width:120%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(128,209,255,.48) 18%,transparent 43%,transparent 57%,rgba(255,166,209,.38) 83%,transparent);
  box-shadow:0 0 18px rgba(128,209,255,.19);
  transform:rotate(-6deg);
  mask-image:linear-gradient(90deg,#000 0%,transparent 30%,transparent 70%,#000 100%);
  animation:beam-drift 13s ease-in-out infinite alternate;
}
@keyframes star-breathe{to{opacity:.28;transform:translate3d(0,-11px,0)}}
@keyframes orbit-drift{to{transform:translate3d(16px,-12px,0) rotate(-14deg)}}
@keyframes beam-drift{to{transform:translate3d(0,-24px,0) rotate(-5deg);opacity:.35}}
.opening{
  background:
    radial-gradient(ellipse 46% 54% at 50% 43%,rgba(121,49,82,.57),transparent 93%),
    radial-gradient(ellipse 52% 63% at 5% 100%,rgba(30,75,119,.25),transparent 90%),
    linear-gradient(145deg,#0a1021 0%,#1d1023 49%,#090d1b 100%);
}
.opening-stars{
  position:absolute;inset:0;pointer-events:none;opacity:.44;
  background:
    radial-gradient(1px 1px at 12% 20%,#ffcde5 98%,transparent),
    radial-gradient(1px 1px at 19% 73%,#b6dfff 98%,transparent),
    radial-gradient(1.5px 1.5px at 83% 26%,#ffcde5 98%,transparent),
    radial-gradient(1px 1px at 88% 81%,#c0dfff 98%,transparent),
    radial-gradient(1px 1px at 70% 67%,#ffdfeb 98%,transparent);
  animation:star-breathe 10s ease-in-out infinite alternate;
}
.ambient-one{background:rgba(197,90,145,.13)}
.ambient-two{background:rgba(60,135,192,.11)}
.progress span{background:rgba(200,220,245,.26);box-shadow:0 0 12px rgba(155,201,255,.12)}
.progress span::after{background:linear-gradient(90deg,#a9cbf0,#f8c3df);box-shadow:0 0 10px rgba(244,177,219,.48)}
@media(max-width:700px){
  .tech-field::before{opacity:.32}
  .tech-orbit{width:92vw}
  .tech-orbit-one{left:-66vw;bottom:-72vw}
  .tech-orbit-two{right:-67vw;top:-69vw}
  .tech-beam{opacity:.34}
}
@media(prefers-reduced-motion:reduce){
  .tech-field::before,.opening-stars,.tech-orbit,.tech-beam{animation:none}
}