.intro{position:fixed;z-index:100;inset:0;display:grid;place-items:center;overflow:hidden;background:#211914;color:#66371e;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s}.intro.active{opacity:1;visibility:visible;pointer-events:auto}.intro[hidden]{display:none!important}.intro>div{position:absolute;inset:auto;left:50%;top:50%;width:min(100vw,177.7778svh);height:min(100svh,56.25vw);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .65s,transform .75s;transform:translate(-50%,-50%) scale(1.04)}.intro>div.active{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.intro-envelope-step{background:radial-gradient(circle at 50% 44%,#8a5731,#2b1d17 66%)}.intro-envelope{position:relative;width:min(330px,58vw);aspect-ratio:1.48;border:0;border-radius:8px;background:#f4d59b;color:#62351e;filter:drop-shadow(0 22px 25px rgba(0,0,0,.45));cursor:pointer;animation:envelopeFloat 2.4s ease-in-out infinite}.intro-envelope:before,.intro-envelope:after{content:"";position:absolute;inset:0;border-radius:8px}.intro-envelope:before{clip-path:polygon(0 0,50% 54%,100% 0);background:#e9bf7d}.intro-envelope:after{clip-path:polygon(0 100%,0 0,50% 57%,100% 0,100% 100%);background:#f8dda5}.intro-envelope b{position:absolute;z-index:3;left:50%;top:40%;transform:translate(-50%,-50%);padding:12px 18px;border:2px solid #753e24;border-radius:50%;background:#bd6d3a;color:#fff0cf;white-space:nowrap}.intro-envelope small{position:absolute;z-index:3;left:50%;bottom:-38px;transform:translateX(-50%);color:#fff0cf;white-space:nowrap;letter-spacing:.12em}.envelope-flap{position:absolute;z-index:4;inset:0;clip-path:polygon(0 0,50% 57%,100% 0);background:#e7b873;transform-origin:top;transition:transform .65s}.intro-envelope.opening .envelope-flap{transform:rotateX(180deg)}
.intro-letter-step{background:radial-gradient(circle,#9d6a3b,#271b16 72%)}.invitation-card{width:min(580px,calc(100vw - 42px));max-height:calc(100vh - 44px);overflow:auto;padding:clamp(30px,5vw,60px);border:7px double #8e562e;border-radius:6px;background:#fff0ce;box-shadow:0 25px 70px rgba(0,0,0,.55);text-align:center}.invitation-card small{letter-spacing:.25em}.invitation-card h1{margin:14px 0;font-size:clamp(30px,5vw,52px)}.invitation-card i{display:block;width:72px;height:2px;margin:18px auto;background:#b8723d}.invitation-card p{text-align:left;line-height:1.8;font-weight:600}.invitation-card .invitation-sign{text-align:right}.invitation-card button{margin-top:14px;border:0;border-radius:15px;background:#66371f;color:#fff0cf;padding:14px 34px;font-weight:900;cursor:pointer;box-shadow:0 5px 0 #3e2114}

/* 2026 invitation artwork */
.intro-envelope-step,
.intro-letter-step { background:#291a14; }

.intro-envelope {
  position:relative;
  width:38%;
  height:100%;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
  padding:0;
  background:transparent;
  filter:none;
  cursor:pointer;
  animation:envelopeFloat 2.4s ease-in-out infinite;
}

.intro-envelope::before,
.intro-envelope::after { content:none; }

.intro-envelope > img {
  position:absolute;
  display:block;
  pointer-events:none;
  user-select:none;
}

.intro-envelope-closed,
.intro-envelope-open {
  left:50%;
  bottom:25%;
  width:100%;
  height:auto;
  transform:translateX(-50%);
  transition:opacity .55s ease,transform .7s ease;
}

.intro-envelope-open {
  opacity:0;
  transform:translateX(-50%) translateY(4%) scale(.96);
}

.intro-open-prompt {
  left:50%;
  bottom:16%;
  width:34%;
  height:auto;
  transform:translateX(-50%);
  animation:introPromptPulse 1.8s ease-in-out infinite;
  transition:opacity .3s ease;
}

.intro-envelope.opening { animation-play-state:paused; }
.intro-envelope.opening .intro-envelope-closed { opacity:0;transform:translateX(-50%) translateY(2%) scale(.98); }
.intro-envelope.opening .intro-envelope-open { opacity:1;transform:translateX(-50%) translateY(0) scale(1); }
.intro-envelope.opening .intro-open-prompt { opacity:0; }

.invitation-card {
  position:relative;
  width:37%;
  height:82%;
  max-height:none;
  overflow:visible;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:initial;
  animation:invitationCardIn .65s cubic-bezier(.2,.8,.25,1) both;
}

.invitation-card-art {
  position:absolute;
  left:50%;
  top:0;
  display:block;
  width:100%;
  height:auto;
  transform:translateX(-50%);
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.28));
  pointer-events:none;
  user-select:none;
}

.invitation-card #acceptInvitation {
  position:absolute;
  z-index:2;
  left:50%;
  bottom:0;
  width:61%;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:translateX(-50%);
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}

.invitation-card #acceptInvitation img { display:block;width:100%;height:auto;pointer-events:none; }
.invitation-card #acceptInvitation:hover,
.invitation-card #acceptInvitation:focus-visible { transform:translateX(-50%) scale(1.04);filter:brightness(1.06);outline:0; }

@keyframes introPromptPulse { 50% { transform:translateX(-50%) translateY(-5%);filter:brightness(1.15); } }
@keyframes invitationCardIn { from { opacity:0;transform:translateY(4%) scale(.97); } }
.intro-exterior-step{background:#d69166}.museum-exterior{position:absolute;inset:0;overflow:hidden}.outside-sky{position:absolute;inset:0 0 32%;background:linear-gradient(#7894b0,#efaf87)}.outside-sky i{position:absolute;width:18%;height:8%;border-radius:50%;background:rgba(255,239,207,.48)}.outside-sky i:nth-child(1){left:8%;top:18%}.outside-sky i:nth-child(2){left:42%;top:9%;width:25%}.outside-sky i:nth-child(3){right:5%;top:31%}.museum-building{position:absolute;left:12%;right:12%;top:13%;bottom:19%;border:12px solid #9d5936;border-radius:80px 80px 0 0;background:#f1c783;box-shadow:0 18px 0 #77452f}.museum-sign{position:absolute;left:50%;top:9%;transform:translateX(-50%);padding:12px 34px;border:6px solid #a45d32;border-radius:18px;background:#ffe3a2;text-align:center;font-weight:900;letter-spacing:.1em;white-space:nowrap}.museum-sign small{display:block;font-size:9px}.museum-door{position:absolute;left:36%;right:36%;bottom:0;height:59%;display:flex;border:10px solid #a15e38;border-bottom:0;border-radius:45% 45% 0 0;background:#5c7985}.museum-door i{flex:1;border-right:3px solid #a15e38}.museum-door i:last-child{border:0}.museum-window{position:absolute;bottom:15%;width:18%;height:32%;border:9px solid #a15e38;border-radius:60px 60px 8px 8px;background:#7596a1}.museum-window.left{left:9%}.museum-window.right{right:9%}.outside-ground{position:absolute;left:-10%;right:-10%;bottom:-12%;height:38%;background:repeating-linear-gradient(90deg,transparent 0 10%,rgba(100,57,40,.15) 10% 10.5%),linear-gradient(#c17d55,#8c5740);transform:perspective(500px) rotateX(52deg)}
.writing-board{position:absolute;left:13%;bottom:12%;width:27%;height:27%;display:grid;place-items:center;border:12px solid #79452e;border-radius:10px;background:#334a3d;color:#ffe3a2;box-shadow:0 12px 0 #573323;font:bold clamp(14px,2vw,25px)/1.5 serif}.outside-curator{position:absolute;left:39%;bottom:8%;width:18%;height:48%;transform-origin:50% 80%;transition:transform .8s}.outside-head{position:absolute;z-index:2;left:21%;top:6%;width:59%;aspect-ratio:1;border:5px solid #5b392e;border-radius:48%;background:#f2b988}.outside-head i{position:absolute;top:43%;width:11%;height:19%;border-radius:50%;background:#243b47;opacity:0;transition:opacity .35s}.outside-head i:first-child{left:26%}.outside-head i:last-child{right:26%}.outside-hair{position:absolute;z-index:3;left:14%;top:0;width:72%;height:34%;border-radius:50% 50% 38% 38%;background:#49302a}.outside-body{position:absolute;left:17%;right:13%;bottom:0;height:57%;border:5px solid #57372c;border-radius:45% 45% 10px 10px;background:linear-gradient(90deg,#eee9df 0 36%,#202525 36% 64%,#eee9df 64%)}.writing-arm{position:absolute;z-index:4;left:-7%;top:51%;width:39%;height:8%;border-radius:20px;background:#eee9df;transform:rotate(-31deg);transform-origin:right;animation:writing .7s ease-in-out infinite alternate}.outside-curator.turned{transform:translateX(18%) scale(1.1)}.outside-curator.turned .outside-head i{opacity:1}.outside-curator.turned .writing-arm{animation:none;transform:rotate(18deg)}
.outside-dialogue{position:absolute;z-index:6;left:50%;bottom:4%;transform:translateX(-50%);width:min(650px,calc(100% - 32px));min-height:100px;padding:28px 145px 20px 28px;border:5px solid #64371f;border-radius:24px;background:#fff0cf;box-shadow:0 12px 0 rgba(80,40,20,.3);opacity:0;transition:opacity .4s}.intro-exterior-step.active .outside-dialogue{opacity:1}.outside-dialogue b{position:absolute;left:22px;top:-22px;padding:7px 17px;border:4px solid #64371f;border-radius:14px;background:#ffc84d}.outside-dialogue p{margin:0;font-weight:800;line-height:1.6}.outside-dialogue button{position:absolute;right:20px;bottom:18px;border:0;border-radius:13px;background:#65361d;color:#fff0cf;padding:12px 16px;font-weight:900;cursor:pointer}.outside-dialogue button span{font-size:20px}
.intro-exterior-step .outside-dialogue{display:none}.museum-door{cursor:pointer;transition:filter .25s,box-shadow .25s}.museum-door:hover{filter:brightness(1.08);box-shadow:0 0 0 6px rgba(255,230,157,.38)}
@keyframes envelopeFloat{50%{transform:translateY(-9px)}}@keyframes writing{to{transform:rotate(-20deg)}}
@media(max-width:760px){.museum-building{left:5%;right:5%;top:14%}.museum-sign{padding:8px 15px}.outside-curator{width:21%;left:38%}.writing-board{left:7%;width:30%;bottom:19%;height:22%}.outside-dialogue{bottom:3%;min-height:88px;padding:25px 105px 13px 18px}.outside-dialogue p{font-size:12px}.outside-dialogue button{right:12px;bottom:13px;padding:10px}}

/* Layered 16:9 homepage */
.homepage-step{background:#148fe0}.homepage{position:absolute;inset:0;overflow:hidden;isolation:isolate}.home-layer{position:absolute;display:block;pointer-events:none;user-select:none}.home-background{z-index:0;inset:0;width:100%;height:100%;object-fit:cover}.home-building{z-index:2;left:5%;top:3%;width:90%;height:84%;object-fit:contain;animation:homeBuildingFloat 7s ease-in-out infinite}.home-foreground{z-index:3;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0 57%,rgba(0,0,0,.12) 64%,#000 76%);mask-image:linear-gradient(to bottom,transparent 0 57%,rgba(0,0,0,.12) 64%,#000 76%)}.home-dots{z-index:4;left:0;top:0;width:100%;height:40%;object-fit:fill;opacity:.72;mix-blend-mode:multiply}.home-title-art,.home-credit-art,.home-open-art,.home-today-art,.home-hello-art{position:absolute;z-index:7;display:block;pointer-events:none}.home-title-art{left:3.4%;top:5.2%;width:35%;animation:homeTitleIn .8s both}.home-credit-art{left:3.5%;bottom:4.8%;width:16.4%}.home-open-art{right:3.5%;bottom:5.4%;width:19.3%;animation:homeBadgePulse 2.6s ease-in-out infinite}.home-today-art{right:4.4%;top:18.2%;width:9.2%}.home-curator-video{position:absolute;z-index:6;left:51.2%;bottom:2.6%;width:27%;height:55%;object-fit:contain;pointer-events:none}.home-hello-art{left:46.2%;top:46%;width:7.2%;animation:homeHello 1.7s ease-in-out infinite}.home-sound-control,.home-settings-control{position:absolute;z-index:10;top:var(--corner-icon-top);width:var(--corner-icon-size);aspect-ratio:1;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transition:transform .2s,filter .2s}.home-sound-control{right:var(--corner-sound-right)}.home-settings-control{right:var(--corner-settings-right)}.home-sound-control img,.home-settings-control img{display:block;width:100%;height:100%}.home-sound-control:hover,.home-settings-control:hover{transform:scale(1.08);filter:drop-shadow(0 5px 5px rgba(0,0,0,.22))}.home-sound-control[aria-pressed="true"]{filter:drop-shadow(0 0 10px #fff)}.home-door-hotspot.museum-door{z-index:9;display:block;position:absolute;left:42%;right:auto;top:48%;bottom:auto;width:15%;height:35%;padding:0;border:0;border-radius:42% 42% 6px 6px;background:rgba(255,255,255,0);box-shadow:none;cursor:pointer}.home-door-hotspot.museum-door:hover{filter:none;box-shadow:0 0 0 5px rgba(255,255,255,.42),0 0 28px rgba(255,221,112,.7)}.home-door-hotspot span{position:absolute;left:50%;bottom:5%;transform:translate(-50%,8px);white-space:nowrap;padding:8px 13px;border-radius:999px;background:#ff7717;color:#fff;font-size:10px;font-weight:900;opacity:0;transition:.2s}.home-door-hotspot:hover span,.home-door-hotspot:focus-visible span{opacity:1;transform:translate(-50%,0)}.homepage.motion-off *{animation-play-state:paused!important}
@keyframes homeBuildingFloat{50%{transform:translateY(-.5%)}}@keyframes homeTitleIn{from{opacity:0;transform:translateX(-4%)}}@keyframes homeBadgePulse{50%{transform:scale(1.035)}}@keyframes homeHello{50%{transform:translateY(-5%) rotate(-2deg)}}
@media(max-width:760px){.home-title-art{top:4%;width:34%}.home-credit-art{bottom:3.5%}.home-open-art{bottom:4%}.home-curator-video{bottom:1.5%;height:57%}.home-door-hotspot.museum-door{top:47%;height:37%}}
.home-background{inset:auto;left:0;top:0;width:100%;height:91.84%;object-fit:fill;animation:homeSkyBreath 12s ease-in-out infinite}.home-foreground{animation:homeForegroundDrift 8s ease-in-out infinite}.home-dots{animation:homeDotsDrift 16s linear infinite}.home-curator-video{left:44.5%;bottom:1%;width:34%;height:62%}
@keyframes homeSkyBreath{50%{transform:scale(1.012);filter:saturate(1.04)}}@keyframes homeForegroundDrift{50%{transform:scale(1.008) translateY(-.25%)}}@keyframes homeDotsDrift{50%{transform:translateX(-.35%)}}

/* Photoshop layer order supplied by the designer: bottom → top. */
.home-foreground{z-index:0;-webkit-mask-image:none;mask-image:none}
.home-background{z-index:1}
.home-title-art{z-index:7}
.home-today-art{z-index:3}
.home-building{z-index:4}
.home-dots{z-index:5}
.home-curator-video{z-index:6}
.home-curator-video{pointer-events:none}
.home-credit-art{z-index:7}
.home-open-art{z-index:8}
.home-sound-control,.home-settings-control{z-index:9}
.home-hello-art{z-index:10}
.home-door-hotspot.museum-door{z-index:11}

/* The door hotspot stays invisible; only its orange label appears on hover. */
.home-door-hotspot.museum-door:hover,
.home-door-hotspot.museum-door:focus-visible{
  background:transparent;
  border:0;
  outline:0;
  box-shadow:none;
  filter:none;
}

.home-curator-source,.home-building-source{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.home-curator-video,.home-building{background:transparent}
.home-curator-video{transition:none}
.home-curator-idle{opacity:0}
.homepage.home-idle-active #homeCuratorAnimation{opacity:0}
.homepage.home-idle-active .home-curator-idle{opacity:1}

/* Homepage entrance: keep both character animation layers aligned. */
.home-curator-video{left:calc(44.5% + 10px)}
.home-door-hotspot.museum-door{
  left:50%;
  top:64.5%;
  width:5.35%;
  height:auto;
  aspect-ratio:1;
  border-radius:50%;
  transform:translateX(calc(-50% + 8px));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.homepage.home-idle-active .home-door-hotspot.museum-door{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.home-door-hotspot.museum-door img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  animation:homeDoorGuideUp 1.8s ease-in-out infinite;
}
.home-door-hotspot.museum-door:hover img,
.home-door-hotspot.museum-door:focus-visible img{animation-play-state:paused}
@keyframes homeDoorGuideUp{
  0%,100%{transform:translateY(0);filter:brightness(1)}
  50%{transform:translateY(-5%);filter:brightness(1.12)}
}

.home-scene-video{
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#148fe0;
}
.homepage.door-opening > :not(.home-scene-video){
  opacity:0;
  pointer-events:none;
}