/* ── Homepage intro (B2) ────────────────────────────────────────────────
   Two modes, matched to the visitor's theme:
   - Daytime (default light): cream/white canvas, daytime strand colours,
     soft morning light — hands off cleanly into the light homepage.
   - Dawn / night (dark theme): warm ink stage, apricot glow from below,
     cream lockup — the original approved Dawn choreography.
   State classes on #intro: lit → mark → name → motto → ready (+ hold).
   Logic: intro-dawn.js. Replay with ?intro=1. */

#intro{
  display:none;position:fixed;inset:0;z-index:9999;
  align-items:center;justify-content:center;
  color:#18150F;
  background:#FFFCFA;
}
#intro.out{opacity:0;pointer-events:none}
.intro-lock{overflow:hidden}

/* ── shared stage ─────────────────────────────────────────────────────── */
.dawn-vignette,.dawn-glow{position:absolute;inset:auto;pointer-events:none}
.dawn-vignette{inset:0}
.dawn-glow{
  left:50%;width:130vmax;height:90vh;
  transform:translateX(-50%) scale(.55);
  opacity:0;
  transition:opacity 2.2s cubic-bezier(.16,1,.3,1),transform 2.6s cubic-bezier(.16,1,.3,1);
}
#intro.lit .dawn-glow{opacity:1;transform:translateX(-50%) scale(1)}
#intro.hold .dawn-glow{animation:dawnBreathe 5.5s ease-in-out infinite}
@keyframes dawnBreathe{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.05)}
}

.dawn-stage{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 24px;
}

.dawn-strands{width:clamp(140px,17vw,190px);height:clamp(140px,17vw,190px);overflow:visible}
.dawn-strands path{
  fill:none;stroke-width:9;stroke-linecap:square;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.7s cubic-bezier(.16,1,.3,1);
}
.dawn-strands .ds-2{transition-delay:.5s}
.dawn-strands .ds-3{transition-delay:1s}
#intro.mark .dawn-strands path{stroke-dashoffset:0}

.dawn-lockup{
  margin-top:30px;opacity:0;transform:translateY(16px);filter:blur(8px);
  transition:opacity 1.3s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1),filter 1.3s cubic-bezier(.16,1,.3,1);
}
#intro.name .dawn-lockup{opacity:1;transform:none;filter:none}
.dawn-name{
  display:block;font-family:var(--sans);font-weight:600;
  font-size:clamp(24px,3.4vw,34px);line-height:1.25;letter-spacing:.04em;
}
.dawn-sig{
  display:block;margin-top:8px;font-family:var(--serif);font-style:italic;
  font-weight:500;font-size:clamp(18px,2.2vw,22px);
}

.dawn-ora{
  margin-top:34px;opacity:0;transform:translateY(10px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);
}
#intro.motto .dawn-ora{opacity:1;transform:none}
.dawn-ora-lat{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(28px,3.6vw,38px);line-height:1.2;letter-spacing:.04em;
}
.dawn-ora-en{
  margin-top:10px;font-family:var(--sans);font-weight:500;font-size:12px;line-height:1;
  letter-spacing:.24em;text-transform:uppercase;
  opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1) .25s;
}
#intro.motto .dawn-ora-en{opacity:1}

.int-enter{
  margin-top:44px;padding:15px 46px;
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  background:transparent;border-radius:100px;cursor:pointer;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),
    background .25s ease,color .25s ease,border-color .25s ease;
}
#intro.ready .int-enter{opacity:1;transform:none;pointer-events:auto}

.int-skip{
  position:absolute;bottom:28px;right:32px;z-index:2;
  background:transparent;font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 16px;border-radius:100px;cursor:pointer;
  opacity:0;animation:int-skip-in .4s ease .5s forwards;
}
@keyframes int-skip-in{to{opacity:1}}
@media (max-width: 600px) {
  #intro[data-mode="day"] {
    background:
      radial-gradient(ellipse 90% 55% at 50% -8%, rgba(212,154,122,.26), transparent 58%),
      radial-gradient(ellipse 70% 50% at 100% 100%, rgba(133,20,39,.08), transparent 55%),
      radial-gradient(ellipse 70% 50% at 0% 100%, rgba(212,154,122,.16), transparent 55%),
      #FFFCFA;
  }
  #intro[data-mode="day"] .dawn-glow {
    top: -32vh;
    opacity: 0.92;
    transform: translateX(-50%) scale(1.05);
  }
  #intro[data-mode="day"].lit .dawn-glow {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
  .int-skip{bottom:20px;right:20px;font-size:10px;padding:8px 14px}
}

/* ══════════════════════════════════════════════════════════════════════
   DAYTIME — soft paper light, daytime strand colours, morning glow
   ══════════════════════════════════════════════════════════════════════ */
#intro[data-mode="day"]{
  background:
    radial-gradient(ellipse 55% 45% at 50% -5%, rgba(212,154,122,.18), transparent 58%),
    radial-gradient(ellipse 40% 40% at 100% 0%, rgba(133,20,39,.07), transparent 55%),
    radial-gradient(ellipse 45% 40% at 0% 100%, rgba(212,154,122,.10), transparent 55%),
    #FFFCFA;
  color:#18150F;
}
#intro[data-mode="day"] .dawn-vignette{
  background:radial-gradient(ellipse 75% 65% at 50% 45%, transparent 50%, rgba(24,21,15,.04) 100%);
}
#intro[data-mode="day"] .dawn-glow{
  bottom:auto;top:-38vh;transform-origin:50% 0%;
  background:radial-gradient(ellipse 52% 55% at 50% 0%,
    rgba(212,154,122,.28) 0%, rgba(212,154,122,.12) 40%, rgba(133,20,39,.05) 65%, transparent 80%);
}
#intro[data-mode="day"].lit .dawn-glow{transform:translateX(-50%) scale(1)}
#intro[data-mode="day"].hold .dawn-glow{animation-name:dayBreathe}
@keyframes dayBreathe{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.04)}
}

/* Daytime mark = header lockup colours */
#intro[data-mode="day"] .dawn-strands .ds-1{stroke:#18150F}
#intro[data-mode="day"] .dawn-strands .ds-2{stroke:#D49A7A}
#intro[data-mode="day"] .dawn-strands .ds-3{stroke:#851427}

#intro[data-mode="day"] .dawn-name{color:#18150F}
#intro[data-mode="day"] .dawn-sig{color:#851427}
#intro[data-mode="day"] .dawn-ora-lat{color:#851427}
#intro[data-mode="day"] .dawn-ora-en{color:rgba(24,21,15,.5)}

#intro[data-mode="day"] .int-enter{
  color:#851427;border:1.5px solid rgba(133,20,39,.4);
}
#intro[data-mode="day"] .int-enter:hover{
  background:#851427;border-color:#851427;color:#EDE9E3;
}
#intro[data-mode="day"] .int-enter:focus-visible{
  outline:2px solid #D49A7A;outline-offset:3px;
}
#intro[data-mode="day"] .int-skip{
  border:1px solid rgba(24,21,15,.16);color:rgba(24,21,15,.48);
}
#intro[data-mode="day"] .int-skip:hover,
#intro[data-mode="day"] .int-skip:focus-visible{
  color:#18150F;border-color:rgba(24,21,15,.35);
}
#intro[data-mode="day"] .int-skip:focus-visible{
  outline:2px solid #D49A7A;outline-offset:2px;
}

/* ══════════════════════════════════════════════════════════════════════
   DAWN / NIGHT — original approved ink stage
   ══════════════════════════════════════════════════════════════════════ */
#intro[data-mode="night"]{
  background:#18150F;color:#EDE9E3;
}
#intro[data-mode="night"] .dawn-vignette{
  background:radial-gradient(ellipse 70% 60% at 50% 50%, transparent 55%, rgba(133,20,39,.12) 100%);
}
#intro[data-mode="night"] .dawn-glow{
  bottom:-42vh;transform-origin:50% 100%;
  background:radial-gradient(ellipse 50% 55% at 50% 100%,
    rgba(212,154,122,.34) 0%, rgba(212,154,122,.16) 38%, rgba(133,20,39,.08) 62%, transparent 78%);
}
#intro[data-mode="night"] .dawn-strands .ds-1{stroke:#EDE9E3}
#intro[data-mode="night"] .dawn-strands .ds-2{stroke:#D49A7A}
#intro[data-mode="night"] .dawn-strands .ds-3{stroke:#851427}

#intro[data-mode="night"] .dawn-name{color:#EDE9E3}
#intro[data-mode="night"] .dawn-sig{color:#D49A7A}
#intro[data-mode="night"] .dawn-ora-lat{color:#D49A7A}
#intro[data-mode="night"] .dawn-ora-en{color:rgba(237,233,227,.6)}

#intro[data-mode="night"] .int-enter{
  color:#EDE9E3;border:1px solid rgba(212,154,122,.5);
}
#intro[data-mode="night"] .int-enter:hover{
  background:#D49A7A;border-color:#D49A7A;color:#18150F;
}
#intro[data-mode="night"] .int-enter:focus-visible{
  outline:2px solid #D49A7A;outline-offset:3px;
}
#intro[data-mode="night"] .int-skip{
  border:1px solid rgba(237,233,227,.2);color:rgba(237,233,227,.55);
}
#intro[data-mode="night"] .int-skip:hover,
#intro[data-mode="night"] .int-skip:focus-visible{
  color:#EDE9E3;border-color:rgba(237,233,227,.4);
}
#intro[data-mode="night"] .int-skip:focus-visible{
  outline:2px solid #D49A7A;outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
  .dawn-glow{opacity:1;transform:translateX(-50%) scale(1);transition:none;animation:none!important}
  .dawn-strands path{stroke-dashoffset:0;transition:none}
  .dawn-lockup,.dawn-ora,.dawn-ora-en{opacity:1;transform:none;filter:none;transition:none}
  .int-enter{transition:background .25s ease,color .25s ease,border-color .25s ease}
  .int-skip{animation:none;opacity:1}
}