/* Ashenfold's opening scene (#story): a 3D lantern-lit ruin behind the logo (systems/intro.js), a thin frame, the
   top and bottom bars, then the logo, the line and Enter. Entering pushes the camera in and fades the title before the
   title screen appears. Tokens only (test/ui-tokens.test.cjs). Loaded after character.css, whose #story rules it
   replaces. */
#story {
  padding: 0; overflow: hidden; isolation: isolate; justify-content: center;
  background: radial-gradient(ellipse 68% 53% at 50% 69%, color-mix(in srgb, var(--af-ember-800) 62%, var(--af-stone-800)) 0%, var(--af-stone-800) 37%, var(--af-stone-950) 85%);
}
/* the vignette and the grain, over the scene and under the words */
#story::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 0; box-shadow: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--af-void) 55%, transparent), transparent 20%, transparent 72%, color-mix(in srgb, var(--af-void) 80%, transparent)),
    radial-gradient(ellipse 80% 74% at 50% 52%, transparent 28%, color-mix(in srgb, var(--af-void) 64%, transparent) 100%);
}
#story::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .19; mix-blend-mode: soft-light;
  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='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.27'/%3E%3C/svg%3E");
}
#intro-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; opacity: 0; transition: opacity 1.6s ease; }
#story.intro-ready #intro-gl { opacity: 1; }
/* shown while the 3D scene loads, and alone where WebGL is missing */
.intro-ambient {
  position: absolute; z-index: 0; inset: -4%; pointer-events: none;
  background:
    radial-gradient(ellipse 12% 24% at 12% 41%, color-mix(in srgb, var(--af-ember-500) 31%, transparent), transparent 90%),
    radial-gradient(ellipse 14% 24% at 86% 38%, color-mix(in srgb, var(--af-ember-500) 22%, transparent), transparent 90%),
    radial-gradient(ellipse 39% 25% at 50% 70%, color-mix(in srgb, var(--af-ember-800) 33%, transparent), transparent 95%);
  animation: intro-ambient 8s ease-in-out infinite alternate;
}
@keyframes intro-ambient { from { transform: scale(1); filter: brightness(.85); } to { transform: scale(1.04); filter: brightness(1.12); } }
.intro-horizon {
  position: absolute; z-index: 2; pointer-events: none; left: -4%; right: -4%; bottom: -11%; height: 36%; opacity: .82;
  background: radial-gradient(ellipse 50% 35% at 50% 2%, color-mix(in srgb, var(--af-ember-700) 13%, transparent), transparent 90%), linear-gradient(0deg, var(--af-void) 20%, var(--af-stone-900) 75%, transparent 100%);
  clip-path: polygon(0 42%, 9% 36%, 16% 43%, 24% 30%, 34% 45%, 43% 29%, 50% 44%, 58% 33%, 67% 46%, 78% 27%, 90% 42%, 100% 31%, 100% 100%, 0 100%);
}
/* the thin frame with two lit corners */
.intro-frame { position: absolute; inset: clamp(14px, 2.45vw, 42px); z-index: 4; pointer-events: none; border: 1px solid color-mix(in srgb, var(--af-gold-600) 25%, transparent); border-radius: 3px; transition: opacity 1s ease; }
.intro-frame::before, .intro-frame::after { content: ""; position: absolute; width: 51px; height: 51px; border-color: color-mix(in srgb, var(--af-ember-400) 49%, transparent); border-style: solid; }
.intro-frame::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.intro-frame::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
/* the top and bottom bars */
.intro-ui { position: absolute; z-index: 5; inset: 0; pointer-events: none; text-align: left; }
.intro-top, .intro-foot { position: absolute; left: clamp(26px, 4vw, 74px); right: clamp(26px, 4vw, 74px); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.intro-top { top: clamp(24px, 4.3vh, 50px); }
.intro-foot { bottom: clamp(22px, 4.4vh, 46px); }
.intro-brand { display: flex; align-items: center; gap: 14px; font: 500 10px/1.4 var(--af-font-ui); letter-spacing: .38em; text-transform: uppercase; color: color-mix(in srgb, var(--af-bone) 72%, transparent); }
.intro-rune { width: 14px; height: 14px; border: 1px solid color-mix(in srgb, var(--af-ember-500) 90%, transparent); transform: rotate(45deg); display: inline-grid; place-items: center; box-shadow: 0 0 18px color-mix(in srgb, var(--af-ember-500) 30%, transparent); }
.intro-rune::after { content: ""; width: 4px; height: 4px; background: var(--af-ember-500); box-shadow: 0 0 9px var(--af-ember-500); }
.intro-utility { display: flex; gap: 24px; align-items: center; pointer-events: auto; }
#story .intro-utility button { margin: 0; padding: 8px 0; min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: none; text-shadow: none; color: color-mix(in srgb, var(--af-bone) 68%, transparent); font: 500 10px/1.3 var(--af-font-ui); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; transition: color .25s ease; }
#story .intro-utility button:hover, #story .intro-utility button:focus-visible { color: var(--af-ember-100); background: transparent; }
.intro-chapter { color: color-mix(in srgb, var(--af-ash) 55%, transparent); font: 500 10px/1.5 var(--af-font-ui); letter-spacing: .28em; text-transform: uppercase; }
.intro-line { flex: 1; max-width: 145px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--af-gold-500) 45%, transparent), transparent); margin-right: auto; }
.intro-tip { color: color-mix(in srgb, var(--af-ash) 44%, transparent); font: 500 10px/1.5 var(--af-font-ui); letter-spacing: .22em; text-transform: uppercase; }
/* the title: eyebrow, rule, logo, line, Enter */
#story .story-inner {
  position: relative; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 0; max-width: none; width: min(100%, 1080px);
  padding: 72px 26px 80px; transform: translate3d(0, 3.3vh, 0);
  transition: transform 1.3s cubic-bezier(.17, .82, .2, 1), opacity .85s ease, filter .85s ease;
}
#story .eyebrow { margin: 0; color: var(--af-gold-300); font: 600 clamp(9px, .8vw, 12px)/1.4 var(--af-font-ui); letter-spacing: .5em; text-transform: uppercase; text-shadow: 0 0 21px color-mix(in srgb, var(--af-ember-500) 38%, transparent); animation: intro-rise .9s .18s both; }
.intro-rule { display: flex; align-items: center; gap: 14px; width: min(220px, 50vw); margin: 14px 0 -6px; }
.intro-rule::before, .intro-rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--af-ember-400) 70%, transparent)); }
.intro-rule::after { transform: rotate(180deg); }
.intro-rule i { display: block; width: 5px; height: 5px; transform: rotate(45deg); background: var(--af-ember-400); box-shadow: 0 0 16px var(--af-ember-500); }
#story .story-inner h1 { margin: 0; font-size: 0; line-height: 0; background: none; filter: none; }
.intro-logo {
  width: min(57vw, 1020px); height: auto; max-height: 50vh; object-fit: contain;
  transform: translate3d(var(--logo-x, 0px), var(--logo-y, 0px), 0);
  animation: intro-logo-arrive 1.55s cubic-bezier(.16, .85, .18, 1) .1s both, intro-logo-breathe 7s ease-in-out 1.75s infinite;
}
@keyframes intro-logo-arrive {
  from { opacity: 0; transform: translateY(28px) scale(.88); filter: blur(12px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 26px 38px color-mix(in srgb, var(--af-void) 66%, transparent)) drop-shadow(0 0 40px color-mix(in srgb, var(--af-ember-600) 18%, transparent)); }
}
@keyframes intro-logo-breathe {
  0%, 100% { filter: drop-shadow(0 26px 38px color-mix(in srgb, var(--af-void) 66%, transparent)) drop-shadow(0 0 36px color-mix(in srgb, var(--af-ember-600) 16%, transparent)); }
  50% { filter: drop-shadow(0 31px 39px color-mix(in srgb, var(--af-void) 70%, transparent)) drop-shadow(0 0 54px color-mix(in srgb, var(--af-ember-500) 30%, transparent)); }
}
#story .story-inner p { margin: -4px 0 25px; max-width: 530px; color: color-mix(in srgb, var(--af-bone) 80%, transparent); font: italic 400 clamp(15px, 1.28vw, 19px)/1.5 var(--af-font-body); letter-spacing: .015em; text-shadow: 0 2px 8px var(--af-void); animation: intro-rise 1s .68s both; }
.intro-actions { display: flex; flex-direction: column; align-items: center; gap: 15px; animation: intro-rise 1s .9s both; }
#story #enter-world {
  position: relative; min-width: 258px; min-height: 57px; margin: 0; padding: 16px 44px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--af-ember-300) 83%, transparent); border-radius: 3px; corner-shape: round; filter: none;
  color: var(--af-ember-100); background: linear-gradient(180deg, color-mix(in srgb, var(--af-ember-700) 95%, transparent), color-mix(in srgb, var(--af-ember-900) 95%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--af-ember-300) 30%, transparent), 0 6px 22px color-mix(in srgb, var(--af-void) 53%, transparent), 0 0 32px color-mix(in srgb, var(--af-ember-600) 18%, transparent);
  font: 600 11px/1.5 var(--af-font-ui); letter-spacing: .28em; text-transform: uppercase; text-shadow: none; cursor: pointer;
  transition: transform .26s, box-shadow .26s, background .26s;
}
#story #enter-world::before { content: ""; position: absolute; inset: 0; width: 50%; transform: translateX(-125%) skewX(-25deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--af-ember-100) 23%, transparent), transparent); transition: transform .6s; }
#story #enter-world:hover, #story #enter-world:focus-visible {
  transform: translateY(-3px); color: var(--af-ember-100); outline: none;
  background: linear-gradient(180deg, var(--af-ember-600), var(--af-ember-800));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--af-ember-300) 60%, transparent), 0 14px 35px color-mix(in srgb, var(--af-void) 66%, transparent), 0 0 48px color-mix(in srgb, var(--af-ember-500) 36%, transparent);
}
#story #enter-world:focus-visible { outline: 2px solid var(--af-ember-300); outline-offset: 5px; }
#story #enter-world:hover::before { transform: translateX(300%) skewX(-25deg); }
#story #enter-world:active { transform: translateY(0) scale(.99); }
#story .intro-actions small { color: color-mix(in srgb, var(--af-ash) 50%, transparent); font: 500 10px/1.4 var(--af-font-ui); letter-spacing: .14em; text-transform: uppercase; }
#story .intro-actions kbd { font: inherit; color: color-mix(in srgb, var(--af-ember-300) 70%, transparent); background: none; border: 0; border-image: none; min-width: 0; height: auto; padding: 0; display: inline; }
@keyframes intro-rise { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
/* entering: the title rises and blurs, a curtain falls while the camera pushes in (intro.js), then the title screen */
.intro-curtain { position: absolute; z-index: 8; inset: 0; pointer-events: none; background: var(--af-void); opacity: 0; transition: opacity 1.2s cubic-bezier(.65, .1, .2, 1); }
#story.intro-entering .story-inner { opacity: 0; transform: translate3d(0, -36px, 0) scale(1.13); filter: blur(5px); }
#story.intro-entering .intro-curtain { opacity: .92; }
#story.intro-entering .intro-ui, #story.intro-entering .intro-frame { opacity: 0; transition: opacity .8s ease; }
@media (max-width: 700px) {
  .intro-frame { inset: 14px; }
  .intro-top { top: 29px; left: 34px; right: 30px; }
  .intro-foot { bottom: 29px; left: 33px; right: 29px; }
  .intro-brand { font-size: 8px; letter-spacing: .21em; gap: 10px; }
  .intro-utility { gap: 11px; }
  #story .intro-utility button { font-size: 9px; letter-spacing: .12em; }
  #intro-fullscreen { display: none; }
  .intro-line, .intro-tip { display: none; }
  #story .story-inner { padding: 88px 20px 76px; transform: translateY(1vh); }
  .intro-logo { width: min(94vw, 560px); max-height: 36vh; }
  #story .eyebrow { letter-spacing: .25em; }
  #story .story-inner p { margin: 3px 0 25px; font-size: 15px; }
  #story #enter-world { min-width: 230px; min-height: 56px; }
}
@media (max-height: 620px) and (min-width: 701px) {
  #story .story-inner { padding: 38px 26px 30px; transform: translateY(0); }
  .intro-logo { max-height: 43vh; }
  #story .story-inner p { margin: -11px 0 13px; }
  #story .eyebrow { font-size: 9px; }
  #story #enter-world { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  #story *, #story *::before, #story *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}