:root {
  color-scheme: light;
  --ink: #4a3c5f;
  --ink-soft: #725f82;
  --rose: #d48da9;
  --lilac: #8e78bd;
  --pearl: #fffafd;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --white-duration: 1.3s;
  --welcome-duration: 6.8s;
  --welcome-delay: 1.2s;
  --black-duration: 1.2s;
  --black-delay: 8.35s;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: #ead6ee;
}

body {
  overflow: hidden;
  font-family: "Yu Gothic", "Noto Sans TC", sans-serif;
  color: var(--ink);
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.portal-page {
  position: relative;
  min-height: 100dvh;
  isolation: isolate;
  overflow: hidden;
  background: #ead6ee;
}

.world, .world__image, .world__haze, .world__light, .world__portal-mist {
  position: absolute;
  inset: 0;
}

.world { z-index: -2; overflow: hidden; }

.world__image {
  inset: -3%;
  background: url("assets/sanctuary-bg-clean.png") 50% 50% / cover no-repeat;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.055);
  transition: transform 1.2s var(--ease-out), filter 1.6s var(--ease-out);
  will-change: transform, filter;
}

.world__haze {
  background:
    linear-gradient(90deg, rgba(255,249,253,.26) 0%, rgba(255,249,253,.08) 42%, transparent 68%),
    linear-gradient(0deg, rgba(97,72,127,.14), transparent 34%);
  pointer-events: none;
}

.world__light {
  left: 54%;
  background: radial-gradient(circle at 68% 72%, rgba(255,255,255,.72), transparent 16%);
  mix-blend-mode: screen;
  opacity: .55;
  animation: breathe 6s ease-in-out infinite;
}

.world__portal-mist {
  left: 45%;
  background:
    radial-gradient(ellipse at 68% 73%, rgba(255,255,255,.5), rgba(246,217,239,.12) 18%, transparent 36%);
  mix-blend-mode: screen;
  opacity: .46;
  filter: blur(6px);
  animation: portalMist 7s ease-in-out infinite;
}

.world__portal-sigil {
  position: absolute;
  left: 69%;
  top: 72%;
  width: clamp(130px, 14vw, 220px);
  aspect-ratio: 1;
  border: 1px solid rgba(202,151,195,.25);
  border-radius: 50%;
  opacity: .08;
  filter: blur(.25px);
  transform: translate(-50%, -50%) scale(.82) rotate(-9deg);
  transition:
    opacity 1.2s ease,
    filter 1.2s ease,
    transform 1.8s var(--ease-out);
}

.world__portal-sigil::before,
.world__portal-sigil::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.world__portal-sigil::before {
  inset: 9%;
  border: 1px solid rgba(255,255,255,.48);
  box-shadow:
    0 0 24px rgba(255,255,255,.18),
    inset 0 0 22px rgba(207,142,195,.08);
}

.world__portal-sigil::after {
  inset: 27%;
  border: 1px solid rgba(187,124,178,.3);
  background:
    linear-gradient(45deg, transparent 48.8%, rgba(255,255,255,.38) 49.5% 50.5%, transparent 51.2%),
    linear-gradient(-45deg, transparent 48.8%, rgba(255,255,255,.3) 49.5% 50.5%, transparent 51.2%);
  transform: rotate(45deg);
}

.world__portal-sigil i {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(172,108,164,.55);
  background: rgba(255,250,253,.7);
  transform: translateX(-50%) rotate(45deg);
}

.world__portal-sigil i:nth-child(2) { top: 50%; right: -4px; left: auto; transform: translateY(-50%) rotate(45deg); }
.world__portal-sigil i:nth-child(3) { top: auto; bottom: -4px; }
.world__portal-sigil i:nth-child(4) { top: 50%; left: -4px; transform: translateY(-50%) rotate(45deg); }

.world__portal-presence {
  position: absolute;
  left: 64%;
  top: 71%;
  width: clamp(180px, 22vw, 340px);
  height: clamp(270px, 34vw, 510px);
  background:
    url("assets/elysia-back.png") center / contain no-repeat;
  opacity: .18;
  filter: blur(1.8px) saturate(.68);
  -webkit-mask-image: radial-gradient(ellipse at 60% 52%, #000 42%, rgba(0,0,0,.72) 68%, transparent 92%);
  mask-image: radial-gradient(ellipse at 60% 52%, #000 42%, rgba(0,0,0,.72) 68%, transparent 92%);
  transform: translate(-50%, -50%) scale(.92);
  transition:
    opacity 1.4s ease,
    filter 1.4s ease,
    transform 1.8s var(--ease-out);
}

.is-portal-awake .world__portal-sigil {
  opacity: .52;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1) rotate(0);
}

.is-portal-awake .world__portal-presence {
  opacity: .38;
  filter: blur(.9px) saturate(.86);
  transform: translate(-50%, -50%) scale(1);
}

.is-portal-awake .world__portal-mist {
  opacity: .72;
}

.world__veil {
  position: absolute;
  width: 80vw;
  height: 10vw;
  border-radius: 50%;
  border-top: 1px solid rgba(255,255,255,.5);
  filter: blur(1px);
  opacity: .36;
  transform: rotate(-8deg);
}

.world__veil--one { left: -15vw; top: 56%; animation: drift 13s ease-in-out infinite alternate; }
.world__veil--two { right: -26vw; top: 22%; animation: drift 17s ease-in-out -4s infinite alternate-reverse; }

.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 clamp(24px, 4vw, 68px);
}

.wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(68,49,86,.82);
  text-decoration: none;
  padding: 0 34px;
  font-family: "Yu Mincho", "Noto Serif TC", serif;
  font-size: 12px;
  letter-spacing: .32em;
  font-weight: 500;
  text-shadow: 0 1px 14px rgba(255,255,255,.9);
}

.wordmark::before,
.wordmark::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(121,84,120,.48));
}
.wordmark::before { left: 0; }
.wordmark::after { right: 0; transform: rotate(180deg); }

.wordmark span:last-child {
  position: relative;
}

.wordmark span:last-child::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 16px;
  height: 1px;
  background: rgba(199,137,175,.56);
  transform: translateX(-50%);
}

.wordmark__mark {
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  border: 1px solid rgba(146,94,133,.78);
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(216,160,198,.2));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.48), 0 0 12px rgba(211,151,192,.28);
}

.music-toggle {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 15px 0 11px;
  border: 1px solid rgba(168,112,151,.28);
  border-radius: 5px 15px 5px 15px;
  color: rgba(68,49,86,.76);
  background:
    linear-gradient(135deg, rgba(255,255,255,.36), rgba(242,211,231,.09)),
    rgba(255,255,255,.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(155,101,141,.08),
    0 12px 36px rgba(92,58,110,.08);
  backdrop-filter: blur(16px) saturate(120%);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.realm-return__mark {
  color: rgba(82, 58, 91, .68);
  font-size: 15px;
  line-height: 1;
}

.realm-return {
  min-width: 118px;
}

.music-toggle::before {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px 13px 4px 13px;
  pointer-events: none;
}

.music-toggle::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -45%;
  width: 28%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  transition: left .9s var(--ease-out);
  pointer-events: none;
}

.music-toggle:hover {
  background:
    linear-gradient(135deg, rgba(255,255,255,.5), rgba(242,211,231,.13)),
    rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.music-toggle:hover::after { left: 120%; }

.music-toggle__flower {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.music-toggle__flower::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #806894;
}

.music-toggle__flower i {
  position: absolute;
  width: 6px;
  height: 10px;
  border: 1px solid rgba(111,82,133,.72);
  border-radius: 70% 70% 55% 55%;
  transform-origin: 50% 11px;
}
.music-toggle__flower i:nth-child(2) { transform: rotate(90deg); }
.music-toggle__flower i:nth-child(3) { transform: rotate(180deg); }
.music-toggle__flower i:nth-child(4) { transform: rotate(270deg); }

.music-toggle[aria-pressed="true"] .music-toggle__flower { animation: flowerTurn 8s linear infinite; }
.music-toggle[aria-pressed="true"] .music-toggle__flower i { background: rgba(255,255,255,.36); }
.music-toggle__text { font-size: 11px; letter-spacing: .12em; white-space: nowrap; }

.music-toggle:focus-visible, .enter-button:focus-visible, .realm-back:focus-visible {
  outline: 3px solid rgba(88,59,123,.5);
  outline-offset: 4px;
}

.hero {
  position: relative;
  z-index: 2;
  min-height: calc(100dvh - 72px);
}

.hero__copy {
  position: absolute;
  left: clamp(24px, 8vw, 132px);
  bottom: clamp(118px, 18vh, 190px);
  max-width: 590px;
  animation: revealCopy 1.5s var(--ease-out) both;
}

.hero h1 {
  margin: 0;
  color: #493957;
  font-family: "Yu Mincho", "Noto Serif TC", serif;
  font-size: clamp(36px, 4.5vw, 72px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.2;
  text-wrap: balance;
  font-feature-settings: "palt" 1;
  color: #57445f;
  text-shadow:
    0 1px 0 rgba(255,255,255,.38),
    0 3px 22px rgba(117,84,125,.11),
    0 1px 18px rgba(255,255,255,.55);
}

.elysian-title {
  position: relative;
  display: grid;
  justify-items: start;
  gap: clamp(2px, .5vw, 8px);
  width: max-content;
  max-width: 100%;
  filter: drop-shadow(0 8px 24px rgba(100, 68, 127, .1));
}

.elysian-title__story,
.elysian-title__memory {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  color: #68598e;
  font-family: "Yu Mincho", "Noto Serif TC", "PMingLiU", serif;
  font-weight: 700;
  line-height: 1.06;
  white-space: nowrap;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.elysian-title__story {
  padding-right: .28em;
  background-image: linear-gradient(102deg, #718ec4 0%, #7770b5 43%, #9d4fc2 78%, #bc3fae 100%);
  font-size: clamp(42px, 5.05vw, 78px);
  letter-spacing: -.075em;
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
}

.elysian-title__story::after {
  position: absolute;
  right: .02em;
  bottom: .12em;
  width: .22em;
  height: .22em;
  border: 1px solid rgba(177, 67, 168, .72);
  border-radius: 68% 32% 70% 30%;
  content: "";
  transform: rotate(42deg);
  -webkit-text-fill-color: initial;
}

.elysian-title__memory {
  margin-left: clamp(18px, 3vw, 48px);
  padding: 0 .34em .08em .04em;
  background-image: linear-gradient(100deg, #e56da7 0%, #c64cb0 46%, #784cb2 100%);
  font-size: clamp(37px, 4.55vw, 70px);
  letter-spacing: -.045em;
}

.elysian-title__memory::before {
  position: absolute;
  top: 56%;
  right: 100%;
  width: clamp(18px, 2.3vw, 36px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(196, 79, 170, .62));
}

.elysian-title__memory::after {
  position: absolute;
  right: 0;
  bottom: .03em;
  width: .3em;
  height: .12em;
  border-bottom: 2px solid rgba(126, 75, 177, .62);
  border-radius: 50%;
  content: "";
  transform: rotate(-12deg);
}

.hero__signature {
  position: relative;
  display: inline-block;
  color: #65446d;
  font-weight: 500;
  letter-spacing: -.055em;
}

.hero__signature::before {
  position: absolute;
  right: -.2em;
  bottom: -.12em;
  left: .05em;
  height: 7px;
  border-bottom: 1px solid rgba(174,104,154,.58);
  border-radius: 0 0 70% 24%;
  content: "";
  transform: rotate(-1.5deg);
  transform-origin: right center;
}

.hero__signature::after {
  position: absolute;
  right: -.46em;
  bottom: -.19em;
  width: .29em;
  height: .29em;
  border: 1px solid rgba(172,100,153,.68);
  border-radius: 62% 38% 64% 36%;
  content: "";
  box-shadow:
    .13em -.08em 0 -.09em #b578a5,
    .19em .06em 0 -.1em #d6a1c2;
  transform: rotate(38deg);
}

.hero h1 em {
  color: inherit;
  font-style: normal;
  font-size: .78em;
  letter-spacing: -.025em;
}

.hero p {
  max-width: 33ch;
  margin: 20px 0 0;
  color: rgba(73,55,86,.64);
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: .105em;
  line-height: 2.05;
  text-shadow: 0 1px 12px rgba(255,255,255,.72);
}

.hero .hero__whisper {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  color: rgba(100, 79, 133, .7);
  font-family: "Yu Mincho", "Noto Serif TC", serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .34em;
  line-height: 1.6;
  white-space: nowrap;
}

.hero__whisper::before {
  width: 42px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(137,111,183,.68));
}

.enter-button {
  position: absolute;
  left: 62%;
  bottom: clamp(70px, 13vh, 126px);
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(350px, 30vw);
  min-width: 278px;
  min-height: 78px;
  padding: 13px 16px 13px 34px;
  border: 1px solid rgba(183,119,158,.38);
  border-radius: 14px;
  color: #4d3b5b;
  background:
    linear-gradient(112deg, rgba(255,255,255,.54), rgba(248,223,239,.15) 46%, rgba(255,255,255,.29)),
    rgba(255,247,252,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(158,95,140,.09),
    0 18px 54px rgba(91,57,111,.14);
  backdrop-filter: blur(22px) saturate(125%);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
  cursor: pointer;
  animation: revealButton 1.3s .35s var(--ease-out) both;
  transition: transform .6s var(--ease-out), background .4s ease, box-shadow .5s ease;
}

.enter-button:hover {
  transform: translateY(-3px) scale(1.012);
  background:
    linear-gradient(112deg, rgba(255,255,255,.7), rgba(248,223,239,.22) 46%, rgba(255,255,255,.39)),
    rgba(255,247,252,.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(158,95,140,.12),
    0 24px 72px rgba(111,72,137,.2);
}

.enter-button:active { transform: translateY(0) scale(.985); }

.enter-button__halo {
  position: absolute;
  inset: -15px -21px;
  border-top: 1px solid rgba(197,132,173,.35);
  border-bottom: 1px solid rgba(255,255,255,.45);
  border-radius: 0;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .5s ease, transform .8s var(--ease-out);
}
.enter-button:hover .enter-button__halo { opacity: 1; transform: scale(1); }

.enter-button::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.34);
  clip-path: inherit;
  pointer-events: none;
}

.enter-button::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -38%;
  z-index: 0;
  width: 23%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: skewX(-17deg);
  transition: left 1.05s var(--ease-out);
  pointer-events: none;
}
.enter-button:hover::after { left: 118%; }

.enter-button__ornament {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(173,108,153,.62);
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(208,143,188,.28));
  box-shadow: 0 0 16px rgba(214,146,195,.32);
  transform: translateY(-50%) rotate(45deg);
}
.enter-button__ornament--left { left: -5px; }
.enter-button__ornament--right { right: -5px; }

.enter-button__label { position: relative; z-index: 1; display: grid; gap: 7px; text-align: left; }
.enter-button__label strong {
  font-family: "Yu Mincho", "Noto Serif TC", serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .14em;
  white-space: nowrap;
}
.enter-button__label small { font-size: 9px; letter-spacing: .24em; opacity: .58; }

.enter-button__note {
  position: relative;
  top: -.12em;
  display: inline-block;
  margin-left: .12em;
  color: #ae6c9d;
  font-family: Georgia, serif;
  font-size: .82em;
  font-weight: 400;
  text-shadow: 0 2px 10px rgba(192,112,168,.24);
  transform: rotate(-8deg);
}
.enter-button__arrow {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 36px;
  margin-left: auto;
  border: 1px solid rgba(150,109,151,.42);
  border-radius: 4px;
  color: #765d82;
  background: linear-gradient(145deg, rgba(255,255,255,.5), rgba(237,220,238,.14));
  box-shadow:
    inset 0 1px 7px rgba(255,255,255,.68),
    0 5px 18px rgba(105,70,127,.1);
  transform: rotate(45deg);
  transition: transform .5s var(--ease-out), border-color .5s ease, background .5s ease;
}

.enter-button__arrow::before {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 2px;
  content: "";
}

.enter-button__arrow > span {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1;
  transform: rotate(-45deg);
}

.enter-button:hover .enter-button__arrow {
  border-color: rgba(139,90,142,.62);
  background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(232,207,235,.22));
  transform: translateX(3px) rotate(45deg);
}

.presence-note {
  position: absolute;
  right: clamp(28px, 4vw, 64px);
  bottom: 28px;
  z-index: 2;
  margin: 0;
  color: rgba(69,52,85,.48);
  font-size: 11px;
  letter-spacing: .16em;
  transition: opacity .55s ease, transform .55s var(--ease-out);
}

.elysia-copyright {
  position: fixed;
  left: clamp(16px, 2vw, 30px);
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 3;
  max-width: min(72vw, 420px);
  color: rgba(67, 49, 82, .58);
  font-family: "Yu Gothic", "Noto Sans TC", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.5;
  text-shadow: 0 1px 10px rgba(255, 250, 253, .95);
  pointer-events: none;
  user-select: none;
}

.presence-note.is-changing {
  opacity: 0;
  transform: translateY(5px);
}

.music-consent {
  position: absolute;
  left: 50%;
  bottom: 25px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(69,52,85,.52);
  font-size: 10px;
  letter-spacing: .12em;
  transform: translateX(-50%);
  transition: opacity .6s ease, transform .6s var(--ease-out);
}

.music-consent span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(119,86,125,.66);
  box-shadow: 0 0 0 5px rgba(255,255,255,.2);
  animation: consentPulse 2.4s ease-in-out infinite;
}

.music-consent.is-hidden {
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
}

.petal {
  position: absolute;
  top: -8vh;
  width: 8px;
  height: 13px;
  border-radius: 80% 0 80% 0;
  background: rgba(244,185,211,.72);
  filter: blur(.2px);
  animation: fall var(--duration) linear var(--delay) infinite;
}

.transition {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  visibility: hidden;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

.transition__white,
.transition__black,
.transition__petals {
  position: absolute;
  inset: 0;
}

.transition__white {
  background:
    radial-gradient(circle at 68% 70%, #fff 0 16%, rgba(255,255,255,.98) 34%, #fff 70%),
    #fff;
  opacity: 0;
}

.transition__black {
  z-index: 4;
  background: #08060b;
  opacity: 0;
}

.transition__welcome {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 14px;
  margin: 0;
  text-align: center;
  color: #a46b9a;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
}

.transition__welcome span {
  font-size: clamp(13px, 1.2vw, 17px);
  letter-spacing: .42em;
  text-indent: .42em;
  color: #b88aae;
}

.transition__welcome strong {
  font-family: "Yu Mincho", "Noto Serif TC", serif;
  font-size: clamp(42px, 5.4vw, 82px);
  font-weight: 500;
  letter-spacing: .12em;
  text-indent: .12em;
  color: #765578;
  text-shadow: 0 10px 48px rgba(201,141,184,.2);
}

.transition-petal {
  position: absolute;
  top: var(--start-y);
  left: var(--start-x);
  width: var(--size);
  height: calc(var(--size) * 1.45);
  border-radius: 78% 10% 74% 16%;
  background: linear-gradient(145deg, rgba(245,172,218,.9), rgba(202,126,197,.56));
  box-shadow: 0 8px 24px rgba(218,139,199,.13);
  opacity: 0;
  filter: blur(var(--blur));
  transform: rotate(var(--rotation));
}

.is-entering .world__image { transform: translate3d(-8%, -5%, 0) scale(1.42); filter: blur(3px) saturate(1.08); transition-duration: 2.2s; }
.is-entering .transition { visibility: visible; }
.is-entering .transition__white { animation: whiteWorld var(--white-duration) var(--ease-out) forwards; }
.is-entering .transition__welcome { animation: welcomeMemory var(--welcome-duration) var(--welcome-delay) var(--ease-out) both; }
.is-entering .transition-petal { animation: transitionPetalFall var(--fall-duration) var(--fall-delay) linear both; }
.is-entering .transition__black { animation: blackCurtain var(--black-duration) var(--black-delay) ease-in forwards; }
  .is-entering .hero, .is-entering .site-header, .is-entering .presence-note, .is-entering .elysia-copyright { animation: dissolve .8s ease forwards; }

.realm-page {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.96), transparent 24%),
    linear-gradient(145deg, #eee2f2, #d9c8e6);
}

.realm-placeholder {
  width: min(720px, calc(100% - 40px));
  padding: 56px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 20px;
  background: rgba(255,255,255,.24);
  backdrop-filter: blur(20px);
}
.realm-placeholder h1 { margin: 0 0 16px; font-family: "Yu Mincho", serif; font-weight: 500; }
.realm-placeholder p { line-height: 1.8; color: var(--ink-soft); }
.realm-back { display: inline-block; margin-top: 18px; color: var(--ink); text-underline-offset: 4px; }

@keyframes breathe { 50% { opacity: .82; transform: scale(1.08); } }
@keyframes portalMist { 50% { opacity: .7; transform: scale(1.08) translateY(-1%); } }
@keyframes flowerTurn { to { transform: rotate(360deg); } }
@keyframes consentPulse { 50% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
@keyframes drift { to { transform: translate3d(4vw, -2vh, 0) rotate(-5deg); } }
@keyframes revealCopy { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } }
@keyframes revealButton { from { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(6px); } }
@keyframes fall {
  to { transform: translate3d(var(--drift), var(--ambient-y, 78vh), 0) rotate(520deg); opacity: .04; }
}
@keyframes whiteWorld {
  0% { opacity: 0; filter: brightness(1); }
  55% { opacity: 1; filter: brightness(1.2); }
  100% { opacity: 1; filter: brightness(1); }
}
@keyframes welcomeMemory {
  0% { opacity: 0; filter: blur(10px); transform: translateY(10px); }
  22%, 72% { opacity: 1; filter: blur(0); transform: translateY(0); }
  100% { opacity: 0; filter: blur(7px); transform: translateY(-7px); }
}
@keyframes transitionPetalFall {
  0% { opacity: 0; transform: translate3d(-8vw, -8vh, 0) rotate(var(--rotation)); }
  12% { opacity: var(--opacity); }
  84% { opacity: var(--opacity); }
  100% { opacity: 0; transform: translate3d(var(--fall-x), var(--fall-y), 0) rotate(calc(var(--rotation) + 620deg)); }
}
@keyframes blackCurtain { to { opacity: 1; } }
@keyframes dissolve { to { opacity: 0; filter: blur(9px); } }

@media (max-width: 820px) {
  .world__image { background-position: 62% 50%; }
  .world__portal-sigil { left: 64%; }
  .world__portal-presence { left: 56%; }
  .hero__copy { left: 24px; right: 24px; bottom: 185px; }
  .hero h1 { font-size: clamp(34px, 10vw, 52px); }
  .elysian-title__story { font-size: clamp(32px, 10.4vw, 52px); }
  .elysian-title__memory {
    margin-left: 16px;
    font-size: clamp(30px, 9.3vw, 46px);
  }
  .hero p { max-width: 27ch; }
  .enter-button { left: 24px; bottom: 78px; width: min(310px, calc(100vw - 48px)); }
  .wordmark { padding: 0 20px; letter-spacing: .22em; }
  .wordmark::before, .wordmark::after { width: 13px; }
  .presence-note { display: none; }
  .elysia-copyright {
    left: 14px;
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 28px);
    font-size: 9px;
    letter-spacing: .035em;
  }
  .music-toggle__text { display: none; }
  .music-toggle { width: 42px; padding: 0; justify-content: center; }
  .music-consent { bottom: 20px; width: max-content; }
  .transition__welcome { gap: 10px; }
  .transition__welcome strong { font-size: clamp(38px, 13vw, 56px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .petals, .world__veil { display: none; }
  .world__portal-sigil, .world__portal-presence { transition: none; }
  .is-entering .transition__white { opacity: 1; }
  .is-entering .transition__welcome { opacity: 1; filter: none; }
  .is-entering .transition__black { opacity: 1; }
  .transition__petals { display: none; }
}

/* Miraito-inspired memory festival: layered orbit composition translated into Elysia's world. */
.portal-page::before {
  position: absolute;
  z-index: 0;
  top: -18vw;
  right: -10vw;
  width: min(62vw, 920px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,250,253,.3);
  border-radius: 50%;
  content: "";
  box-shadow: inset 0 0 0 8vw rgba(255,255,255,.035), 22px 28px 90px rgba(95,65,126,.09);
  pointer-events: none;
}

.world__image { filter: saturate(.9) brightness(1.04); }
.world__haze {
  background:
    linear-gradient(90deg, rgba(255,250,253,.72) 0%, rgba(255,250,253,.31) 36%, transparent 62%),
    linear-gradient(0deg, rgba(101,77,137,.18), transparent 38%);
}

.memory-orbit {
  position: absolute;
  left: 69%;
  top: 56%;
  width: min(48vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.memory-orbit__ring { position: absolute; inset: 0; border-radius: 50%; }
.memory-orbit__ring--outer {
  border: 1px solid rgba(117,86,155,.24);
  background: repeating-conic-gradient(from 18deg, transparent 0 9deg, rgba(255,255,255,.34) 9.2deg 9.45deg, transparent 9.7deg 20deg);
  -webkit-mask: radial-gradient(circle, transparent 0 68%, #000 68.4% 69%, transparent 69.5%);
  mask: radial-gradient(circle, transparent 0 68%, #000 68.4% 69%, transparent 69.5%);
  animation: memoryOrbitSpin 42s linear infinite;
}
.memory-orbit__ring--inner {
  inset: 17%;
  border: 1px dashed rgba(212,141,169,.38);
  box-shadow: inset 0 0 80px rgba(255,250,253,.14);
  animation: memoryOrbitSpin 34s linear reverse infinite;
}

.memory-orbit__star { position: absolute; color: rgba(255,250,253,.9); text-shadow: 5px 7px 18px rgba(118,80,148,.3); }
.memory-orbit__star--one { left: 9%; top: 21%; font-size: 28px; animation: orbitStarFloat 5.2s ease-in-out infinite; }
.memory-orbit__star--two { right: 2%; top: 43%; font-size: 20px; animation: orbitStarFloat 6.4s -2s ease-in-out infinite; }
.memory-orbit__star--three { left: 28%; bottom: 2%; color: #d48da9; font-size: 17px; animation: orbitStarFloat 4.8s -1s ease-in-out infinite; }
.memory-orbit__ribbon {
  position: absolute;
  left: -12%;
  top: 52%;
  width: 124%;
  height: 18%;
  border-top: 1px solid rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(142,120,189,.22);
  border-radius: 50%;
  transform: rotate(-10deg);
  filter: drop-shadow(9px 15px 22px rgba(89,62,117,.12));
}

.site-header {
  height: 82px;
  padding: 0 clamp(22px, 3.5vw, 58px);
  border-bottom: 1px solid rgba(81,58,105,.13);
}
.wordmark { font-weight: 700; }

.hero { min-height: calc(100dvh - 82px); }
.hero__copy {
  left: clamp(28px, 6.3vw, 106px);
  bottom: clamp(132px, 20vh, 210px);
}
.hero__chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: rgba(74,60,95,.72);
  font-size: 9px;
  letter-spacing: .18em;
}
.hero__chapter span {
  padding: 7px 12px;
  border: 1px solid rgba(142,120,189,.36);
  border-radius: 999px;
  background: rgba(255,250,253,.48);
  font-family: Georgia, serif;
}
.hero__chapter b { font-weight: 600; }
.elysian-title__story,
.elysian-title__memory {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.88)) drop-shadow(5px 8px 16px rgba(95,62,133,.12));
}
.elysian-title__story {
  background-image: linear-gradient(96deg, #789bd0 0%, #7271b6 39%, #8750b6 70%, #a635a4 100%);
  font-size: clamp(46px,5.5vw,84px);
}
.elysian-title__memory {
  background-image: linear-gradient(98deg, #ec72a8 0%, #d550a6 46%, #a541ad 72%, #7045a8 100%);
  font-size: clamp(40px,4.8vw,73px);
}
.elysian-title::before,
.elysian-title::after {
  position: absolute;
  z-index: 2;
  color: #9a55b9;
  font-family: Georgia, serif;
  line-height: 1;
  -webkit-text-fill-color: initial;
  text-shadow: 0 0 12px rgba(255,255,255,.9), 3px 5px 14px rgba(126,67,165,.18);
  pointer-events: none;
}
.elysian-title::before {
  content: "✦";
  top: -.2em;
  left: -.2em;
  font-size: .22em;
  transform: rotate(12deg);
}
.elysian-title::after {
  content: "❀";
  right: -.34em;
  bottom: .04em;
  color: #cf4daa;
  font-size: .27em;
  transform: rotate(-13deg);
}
.elysian-title__story::before {
  position: absolute;
  top: .08em;
  left: 47%;
  width: .11em;
  height: .11em;
  border-radius: 50%;
  background: #fffafd;
  box-shadow: 0 0 0 1px rgba(116,76,175,.28), 0 0 15px rgba(255,255,255,.9);
  content: "";
  -webkit-text-fill-color: initial;
}
.elysian-title__memory::before {
  top: 54%;
  width: clamp(26px,3vw,46px);
  background: linear-gradient(90deg, transparent, #d74fa8);
}
.elysian-title__memory::after {
  right: -.16em;
  bottom: .08em;
  width: .36em;
  height: .2em;
  border: 1px solid rgba(140,67,177,.72);
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-19deg);
}
.hero .hero__whisper { max-width: 38ch; white-space: normal; letter-spacing: .14em; }

.enter-button {
  left: auto;
  right: clamp(42px, 8vw, 138px);
  bottom: clamp(74px, 12vh, 118px);
  width: min(380px, 31vw);
  min-height: 92px;
  border-radius: 46px;
  clip-path: none;
  background: rgba(255,250,253,.74);
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.28), 16px 21px 54px rgba(87,58,112,.16);
}
.enter-button::before { inset: 7px; border-color: rgba(164,108,155,.24); border-radius: 38px; clip-path: none; }
.enter-button__halo { inset: -14px; border: 1px dashed rgba(142,120,189,.31); border-radius: 54px; }
.enter-button__label small { display: block; color: rgba(74,60,95,.48); font-family: Georgia,serif; }

.realm-index {
  position: absolute;
  z-index: 3;
  left: clamp(26px, 4vw, 64px);
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(74,60,95,.54);
  font-size: 8px;
  letter-spacing: .18em;
}
.realm-index span { color: #b75e91; font-family: Georgia,serif; font-size: 19px; }
.realm-index i { width: 48px; height: 1px; background: rgba(74,60,95,.3); }
.realm-index b { font-weight: 600; }
.elysia-copyright { left: auto; right: clamp(16px,2vw,30px); max-width: 430px; text-align: right; }
.presence-note { right: 50%; bottom: 30px; transform: translateX(50%); }
.music-consent { bottom: 54px; }

.is-portal-awake .memory-orbit { filter: brightness(1.08); }
.is-portal-awake .memory-orbit__ring--inner { border-color: rgba(212,141,169,.72); }

@keyframes memoryOrbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitStarFloat { 50% { transform: translate(9px,-13px) rotate(24deg) scale(1.15); } }

@media (max-width: 760px) {
  .site-header { height: 66px; padding: 0 14px; }
  .wordmark { padding: 0 18px; font-size: 10px; }
  .site-header__actions { gap: 4px; }
  .music-toggle { min-height: 36px; padding: 0 9px; }
  .music-toggle__text { font-size: 9px; }
  .realm-return { min-width: auto; }
  .hero { min-height: calc(100dvh - 66px); }
  .hero__copy { top: 15%; bottom: auto; left: 22px; right: 18px; }
  .hero__chapter b { display: none; }
  .elysian-title__story { font-size: clamp(38px,12vw,58px); }
  .elysian-title__memory { margin-left: 14px; font-size: clamp(34px,10.5vw,52px); }
  .hero .hero__whisper { font-size: 10px; }
  .memory-orbit { left: 58%; top: 61%; width: 112vw; }
  .world__portal-presence { left: 58%; top: 63%; width: 68vw; height: 78vw; }
  .enter-button { right: 18px; bottom: 84px; width: calc(100% - 36px); min-width: 0; min-height: 76px; }
  .realm-index { left: 18px; bottom: 26px; }
  .presence-note, .music-consent { display: none; }
  .elysia-copyright { right: 14px; bottom: 10px; max-width: 54vw; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .memory-orbit__ring, .memory-orbit__star { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .enter-button, .music-toggle, .realm-placeholder { background: rgba(255,250,253,.92); backdrop-filter: none; }
}