/* First Awakening · v253. Additive landing and Story entry styles.
   The Book remains the actual stage; this layer adds its damaged prologue
   and low-friction Q1 choices without changing the illustrated game previews. */
.first-prologue[hidden],.first-spread[hidden],.first-custom-entry[hidden],
.first-meet-action[hidden],.first-continue-button[hidden]{display:none!important}
.first-prologue{
  position:relative;isolation:isolate;min-height:clamp(480px,68vh,660px);
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(275px,.88fr);
  gap:clamp(15px,4vw,70px);align-items:center;padding:clamp(22px,5vw,65px);
  border:1px solid rgba(207,168,114,.32);border-radius:14px;overflow:hidden;
  background:radial-gradient(ellipse at 30% 36%,rgba(137,99,58,.16),transparent 52%),
  linear-gradient(130deg,#140f0c,#080808 80%);
  box-shadow:inset 0 0 95px rgba(0,0,0,.7),0 26px 80px rgba(0,0,0,.42)
}
.first-prologue:after{content:"";position:absolute;inset:12px;border:1px solid rgba(211,165,104,.13);border-radius:7px;pointer-events:none}
.first-prologue-page{
  display:block;position:relative;min-height:clamp(330px,44vw,500px);width:100%;
  border:0;border-left:12px solid #987b57;border-radius:7px 14px 14px 7px;
  background:linear-gradient(90deg,rgba(78,55,35,.23),transparent 18%),
   repeating-linear-gradient(1deg,transparent 0 36px,rgba(92,61,34,.07) 37px 38px),
   linear-gradient(145deg,#e8d5b2,#f4e6c8 55%,#ccab80);
  box-shadow:inset 13px 0 25px rgba(59,37,20,.25),inset 0 0 0 12px rgba(247,226,194,.18),22px 24px 44px #0009;
  cursor:pointer;overflow:hidden;transform:rotate(-3deg);
  transition:transform .38s,box-shadow .38s
}
.first-prologue-page:hover,.first-prologue-page:focus-visible{transform:rotate(-1deg) translateY(-4px)}
.first-prologue-page:before{content:"";position:absolute;inset:18px;border:1px solid rgba(107,71,40,.21);pointer-events:none}
.first-prologue-page:after{content:"";position:absolute;inset:11% 4% 3% 8%;background:radial-gradient(ellipse at center,rgba(79,51,29,.17),transparent 60%);pointer-events:none}
.first-prologue-registries{position:absolute;left:13%;right:10%;top:16%;display:grid;gap:17px}
.first-prologue-registries i{height:2px;background:linear-gradient(90deg,rgba(94,62,36,.55),rgba(94,62,36,.09) 72%,transparent)}
.first-prologue-registries i:nth-child(2){width:65%;transform:translateX(20%)}.first-prologue-registries i:nth-child(3){width:85%;transform:translateX(-8%)}
.first-prologue-ghost{position:absolute;inset:26% 23% 21%;display:grid;place-items:center;opacity:.23;filter:blur(1px)}
.first-prologue-ghost:before{content:"";width:64%;height:69%;border:3px solid #533a29;border-radius:46% 50% 19% 24%;transform:rotate(8deg);box-shadow:24px 15px 0 -15px rgba(65,45,28,.6);clip-path:polygon(0 0,100% 0,100% 58%,60% 58%,70% 100%,0 100%)}
.first-prologue-ghost:after{content:"";position:absolute;left:17%;right:14%;top:51%;border-top:2px dashed #66452c;transform:rotate(-11deg)}
.first-prologue-line{position:absolute;left:13%;right:12%;bottom:17%;display:block;color:#6b4b32;font:italic 500 clamp(1.06rem,2vw,1.45rem)/1.5 Georgia,serif;text-align:center;opacity:.88}
.first-prologue-scar{position:absolute;top:11%;right:9%;width:35px;height:53px;opacity:.4;background:repeating-linear-gradient(145deg,transparent 0 7px,#503322 8px 10px,transparent 11px 16px)}
.first-prologue-page.is-touched .first-prologue-ghost{opacity:.65;filter:none;transition:opacity .5s,filter .5s}
.first-prologue-page.is-touched .first-prologue-line{color:#37261a;text-shadow:0 0 7px rgba(173,116,61,.18)}
.first-prologue-copy{position:relative;z-index:1;min-width:0}
.first-prologue-kicker{display:block;color:#c8a579;font:800 .65rem/1.5 "Geist Mono",monospace;letter-spacing:.17em;margin-bottom:15px}
.first-prologue h2{font:600 clamp(1.8rem,3.2vw,3.45rem)/1.13 Georgia,serif;color:#f2e4cf;letter-spacing:-.035em;margin:0 0 17px}
.first-prologue p{max-width:36ch;color:#d7c3a6;font:500 1rem/1.65 "DM Sans",sans-serif;margin:0 0 20px}
.first-prologue-note{display:block;margin-top:15px;color:#b29a79;font:600 .69rem/1.5 "Geist Mono",monospace}
.first-prologue-continue{width:100%;max-width:320px;white-space:normal}
.first-paper-inner .first-paper-mark{position:relative}
.first-paper-inner .first-paper-mark:after{content:"";display:block;width:22px;height:35px;position:absolute;right:-18px;top:15px;background:repeating-linear-gradient(140deg,transparent 0 5px,#85684d 6px 7px,transparent 8px 12px);opacity:.46;transform:rotate(-13deg)}
.first-choice-lede{font:600 .92rem/1.5 "DM Sans",sans-serif;color:#65482d;margin:-5px 0 13px}
.first-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 13px}
.first-choice{
 border:1px solid rgba(122,82,48,.43);border-radius:8px;min-height:89px;
 display:flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:5px;text-align:left;
 padding:12px 13px;background:rgba(255,248,229,.58);color:#3e291b;
 transition:background .15s,transform .15s,border-color .15s;overflow-wrap:anywhere
}
.first-choice:hover,.first-choice:focus-visible{background:#f9ecd2;border-color:#895b36;transform:translateY(-2px)}
.first-choice:active{transform:translateY(0)}
.first-choice strong{font:700 clamp(.88rem,1.2vw,1.02rem)/1.35 "DM Sans",sans-serif}
.first-choice small{font:500 .72rem/1.3 "DM Sans",sans-serif;color:#826347}
.first-choice-alt{display:block;width:100%;margin:5px 0 4px;background:transparent;border:1px solid rgba(104,72,46,.25);
 color:#5a402a;border-radius:7px;padding:10px 12px;text-align:center;font:750 .7rem/1.4 "Geist Mono",monospace;letter-spacing:.025em}
.first-choice-alt:hover{background:#f5e7cc}
.first-custom-entry{margin-top:12px}
.first-response-origin{display:block;color:#876443;font:700 .6rem/1.5 "Geist Mono",monospace;letter-spacing:.08em;margin:10px 0 0}
.first-meet-action{display:block;max-width:100%;margin:16px auto 0;border:1px solid #9d7952;border-radius:7px;padding:11px 20px;color:#352517;background:#e7d3af;font:750 .72rem/1.35 "Geist Mono",monospace}
.first-meet-action:hover{background:#f5e3c3}
.first-reaction-scene[data-beat="witness"] .first-witness-ink img{opacity:.55}
.first-reaction-scene[data-beat="recognition"] .first-witness-ink img,
.first-reaction-scene[data-beat="scar"] .first-witness-ink img{opacity:1;transform:translateY(0) scale(1);filter:grayscale(.18) contrast(1.05) brightness(.98)}
.first-reaction-scene[data-beat="recognition"] .first-witness-ink,
.first-reaction-scene[data-beat="scar"] .first-witness-ink{height:clamp(160px,18vw,218px);max-width:310px}
.first-reaction-scar{height:24px;width:26px;margin:8px auto 2px;opacity:0;transform:scale(.7);
 background:repeating-linear-gradient(140deg,transparent 0 5px,#725039 6px 8px,transparent 9px 13px);
 transition:opacity .4s,transform .4s}
.first-reaction-scene[data-beat="scar"] .first-reaction-scar{opacity:.85;transform:scale(1)}
.story-q1-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 15px}
.story-q1-choice{border:1px solid rgba(113,79,47,.45);background:#edddbd;color:#46301b;border-radius:7px;
 text-align:left;padding:13px;display:flex;flex-direction:column;gap:5px;min-height:76px}
.story-q1-choice:hover{background:#f8eacb}.story-q1-choice strong{font:700 .92rem/1.3 "DM Sans",sans-serif}
.story-q1-choice small{font:.75rem/1.4 "DM Sans",sans-serif;color:#765b3f}
.story-q1-custom-toggle{display:block;border:1px solid rgba(115,75,48,.42);background:transparent;color:inherit;border-radius:6px;min-height:42px;padding:10px;width:100%;font-weight:700}
.story-q1-custom[hidden]{display:none!important}
@media(max-width:800px){
 .first-prologue{grid-template-columns:1fr;padding:22px 19px;gap:27px}
 .first-prologue-page{min-height:clamp(215px,52vw,340px);width:min(86%,360px);justify-self:center}
 .first-prologue h2{font-size:clamp(1.75rem,6vw,2.5rem)}
 .first-prologue-copy{text-align:center}.first-prologue p{margin:0 auto 17px}
 .first-prologue-continue{width:100%}
}
@media(max-width:500px){
 .first-choice-grid,.story-q1-choice-grid{gap:8px}
 .first-choice{min-height:80px;padding:11px 10px}
 .first-choice strong{font-size:.88rem}
 .first-choice small{font-size:.67rem}
 .first-reaction-scene[data-beat="recognition"] .first-witness-ink,
 .first-reaction-scene[data-beat="scar"] .first-witness-ink{height:148px}
 .first-prologue{min-height:unset}
 .first-prologue-note{font-size:.6rem}
}
@media(prefers-reduced-motion:reduce){
 .first-prologue-page,.first-prologue-ghost,.first-reaction-scar,.first-choice,
 .first-witness-ink img{transition:none!important;animation:none!important}
}

/* Restrained motion: the damaged Book struggles to hold a memory. */
@keyframes fa-breath{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:1;transform:scale(1.05)}}
@keyframes fa-forgotten{0%,100%{opacity:.14;filter:blur(2.2px)}45%{opacity:.32;filter:blur(1px)}55%{opacity:.26;filter:blur(1.6px)}}
@keyframes fa-message{0%,100%{opacity:.45;letter-spacing:0}45%{opacity:1;letter-spacing:.012em}}
@keyframes fa-scar{0%,100%{opacity:.34}52%{opacity:.67}}
.first-book-glow{animation:fa-breath 6s ease-in-out infinite}
.first-prologue-page:not(.is-touched) .first-prologue-ghost{animation:fa-forgotten 5.4s ease-in-out infinite}
.first-prologue-page:not(.is-touched) .first-prologue-line{animation:fa-message 5.4s ease-in-out infinite}
.first-prologue-scar{animation:fa-scar 4.4s ease-in-out infinite}
.first-prologue-page.is-touched .first-prologue-ghost,
.first-prologue-page.is-touched .first-prologue-line{animation:none}
.first-top-actions{display:flex;align-items:center;gap:18px}
.first-sound-toggle{border:1px solid rgba(214,185,142,.34);background:rgba(215,181,132,.045);color:#d6c09f;
 padding:9px 12px;border-radius:6px;font:750 .61rem/1.3 "Geist Mono",monospace;letter-spacing:.07em}
.first-sound-toggle:hover{border-color:rgba(214,185,142,.67);background:rgba(215,181,132,.1)}
@media(max-width:680px){.first-top-actions{gap:11px}.first-sound-toggle{padding:8px;font-size:.54rem}}
@media(prefers-reduced-motion:reduce){
 .first-book-glow,.first-prologue-ghost,.first-prologue-line,.first-prologue-scar{animation:none!important}
}

/* Chapter I: the same scars are visible when an existing member starts fresh. */
.story-first-page-minimal{position:relative}
.story-first-fracture{position:absolute;left:21%;right:17%;top:28%;height:36%;
 border:1px dashed rgba(91,61,38,.19);clip-path:polygon(0 0,100% 0,80% 100%,5% 92%)}
.story-first-fracture:after{content:"";position:absolute;right:16%;top:11%;width:23px;height:54px;
 background:repeating-linear-gradient(140deg,transparent 0 5px,rgba(98,63,40,.36) 6px 8px,transparent 9px 13px)}
.story-first-whisper{position:absolute;bottom:18%;left:10%;right:10%;margin:0;text-align:center;
 font:italic 500 clamp(1.2rem,2vw,1.7rem)/1.4 Georgia,serif;color:rgba(89,58,36,.66)}
.story-q1-write-page.story-q1-one-tap{
 display:block;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
 max-width:480px;height:100%;max-height:100%;padding:8px 7px 20px
}
.story-q1-write-page .story-q1-choice-grid{margin:13px 0}
.story-q1-write-page .story-q1-privacy{margin:6px 0 9px}
.story-q1-write-page .story-q1-custom{padding-top:9px}
.story-q1-write-page .story-q1-submit{margin-top:12px}
@media(max-width:500px){.story-q1-write-page.story-q1-one-tap{max-height:100%;padding:4px 5px 16px}}