/* Restored from the project's site-preview/app/globals.css.
   Keep the original type, artboard proportions, ring depths and six-story layout. */
@font-face { font-family: "Source Han Sans SC Local"; src: url("./assets/NotoSansCJKsc-Light.otf") format("opentype"); font-style: normal; font-weight: 300; font-display: swap; }
.lily-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; color-scheme: dark; }
.lily-scroll::-webkit-scrollbar { display: none; }
.lily-scroll:focus-visible { outline: 1px solid #dce7e866; outline-offset: -5px; }
.lily-sequence { position: relative; height: 770svh; }
.lily-stage { position: sticky; top: var(--story-top); margin-inline:auto;width: var(--story-width); height: var(--story-height); overflow: hidden; background: #040f14; isolation: isolate; }
.lily-artboard { pointer-events: none; container-type: inline-size; position: absolute; top: 50%; left: 50%; width: min(100%, calc(var(--story-height) * 1440 / 1024)); aspect-ratio: 1440 / 1024; transform: translate(-50%, -50%); overflow: hidden; perspective: 900px; --mouse-x: 0; --mouse-y: 0; --lily-near: 0; --story-entry: 1; }
.lily-system { position: absolute; z-index: 6; left: 50%; top: 54.1016%; width: 28%; height: 43.2%; transform: translate(-50%, -50%); }
.lily-float { position: absolute; inset: 0; animation: restored-lily-drift 5.4s ease-in-out infinite; animation-play-state: paused; }
.lily-tilt { position: absolute; inset: 0; transform: perspective(800px) translate(calc(var(--mouse-x) * 12px), calc(var(--mouse-y) * 8px)) rotateX(calc(var(--mouse-y) * -9deg)) rotateY(calc(var(--mouse-x) * 12deg)); }
.lily-artboard .destination-lily { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: brightness(calc(.82 + var(--lily-near) * .08)) saturate(.68); }
.lily-grain { position: absolute; z-index: 20; inset: -50%; opacity: .12; background-image: repeating-radial-gradient(circle at 17% 23%, transparent 0 1px, rgb(255 255 255 / 22%) 1.5px 2px), repeating-radial-gradient(circle at 81% 69%, transparent 0 1px, rgb(0 0 0 / 35%) 1.5px 2px); background-size: 5px 5px, 7px 7px; mix-blend-mode: soft-light; pointer-events: none; animation: restored-grain-shift .45s steps(2) infinite; animation-play-state: paused; }
.lily-vignette { position: absolute; z-index: 19; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 34%, rgb(0 4 7 / 18%) 68%, rgb(0 3 5 / 48%) 100%); pointer-events: none; }
body[data-scene="lily"]:not([data-lily-paused]) .lily-float, body[data-scene="lily"]:not([data-lily-paused]) .lily-grain { animation-play-state: running; }
@keyframes restored-lily-drift { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes restored-grain-shift { 0%,100% { transform: translate3d(-1%,1%,0); } 25% { transform: translate3d(1%,-2%,0); } 50% { transform: translate3d(2%,1%,0); } 75% { transform: translate3d(-2%,-1%,0); } }
@media (max-aspect-ratio: 3 / 4) { .lily-artboard { width: min(125%, calc(var(--story-height) * 1440 / 1024)); } }
@media (prefers-reduced-motion: reduce) { .lily-float, .lily-grain { animation: none; } .lily-tilt { transform: none; } }
.lily-story {
  position: absolute;
  inset: 0;
  opacity: var(--story-entry);
  visibility: visible;
  pointer-events: none;
  /* Do not create a new stacking context: rear glyphs are z4, flower z6,
     near glyphs z10 and the original central numbers z12. */
  will-change: auto;
}

.lily-story[data-active='true'] {
  visibility: visible;
}

.story-glyph {
  --glyph-alpha: 0;
  --glyph-near: 0;
  position: absolute;
  left: 50%;
  top: 54.1016%;
  width: 1.1em;
  color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Songti SC", serif;
  font-size: clamp(21px, 2.0139cqw, 29px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 8px #ffffff99, 0 0 22px #ffffff33;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform, opacity;
}

.story-number {
  --number-presence: 0;
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 54.1016%;
  width: max-content;
  opacity: 0;
  color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Songti SC", serif;
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.075em;
  text-align: center;
  text-shadow: 0 0 3px #fff, 0 0 11px #ffffffdd, 0 0 26px #ffffff77, 0 0 52px #e1f1f033;
  will-change: transform, opacity;
}

.story-value {
  font-size: clamp(90px, 11.6667cqw, 168px);
}

.story-unit {
  margin-left: .08em;
  font-size: clamp(31px, 4.2361cqw, 61px);
  letter-spacing: -.04em;
}

.story-translation {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 79%;
  width: max-content;
  max-width: min(78%, 920px);
  margin: 0;
  opacity: 0;
  color: rgb(255 255 255 / 82%);
  font-family: "Source Han Sans SC Local", "Source Han Sans SC", sans-serif;
  font-size: clamp(12px, .9722cqw, 14px);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .34em;
  text-align: center;
  text-shadow: 0 0 7px rgb(255 255 255 / 16%);
  will-change: transform, opacity;
}

@media (max-aspect-ratio: 3 / 4) {
  .story-glyph { font-size: clamp(17px, 2.2cqw, 23px); }
  .story-translation { top: 76%; width: 72%; line-height: 1.9; }
}

@media (prefers-reduced-motion: reduce) {
  .story-glyph { filter: none; }
}

/* Keep the original grain texture without continually rasterizing a 4× layer. */
.lily-grain { inset: 0; animation: none; opacity:calc(.12 * (1 - var(--chapter-pan,0))); }
.lily-vignette { opacity:calc(1 - var(--chapter-pan,0)); }
.lily-stage { background: #040f14; }