/* MESTÉA — opening.css
   序幕。JS が無ければ「幹の写真＋題」の静止画。隠す・動かす規則はすべて scripting: enabled の中。 */

.opening {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
  background: #0A0C08;
  color: #F1F2EC;
  isolation: isolate;
  overflow: hidden;
}
.opening picture, .opening img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; z-index: -2; }
.opening::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,12,8,.55) 0%, rgba(10,12,8,.04) 22%, rgba(10,12,8,.04) 50%, rgba(10,12,8,.74) 100%);
}
.opening .wrap { padding-block: var(--space-4) var(--space-3); }
.opening .eyebrow { color: #F1F2EC; }
.opening h1 { color: inherit; max-width: 16em; text-shadow: 0 1px 24px rgba(0,0,0,.25); font-weight: 300; }
.opening .ch { display: inline-block; }
.opening .tagline { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); margin: var(--space-2) 0 0; letter-spacing: .08em; }
.opening .cue {
  display: inline-block; margin-top: var(--space-3);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: inherit; text-decoration: none; opacity: .8;
}
.opening .cue::after { content: ""; display: block; width: 1px; height: 2.2rem; margin: .6rem auto 0; background: currentColor; }
.drop { position: absolute; left: 50%; top: 28%; width: 14px; height: 46px; color: #E7C87A; transform: translateX(-50%); z-index: 1; display: none; }

@media (scripting: enabled) {
  /* 一粒 */
  .has-opening .drop { display: block; opacity: 0; }
  .opening.is-drop .drop { animation: drop 2400ms cubic-bezier(.4, 0, .6, 1) 400ms forwards; }
  @keyframes drop {
    0%   { opacity: 0; transform: translate(-50%, 0) scaleY(1); }
    15%  { opacity: 1; }
    85%  { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%, 33vh) scaleY(1.4); }
  }
  /* 写真：黒から 1.6s で現れ、6s かけて 1.06 → 1.00 に引く */
  .has-opening .opening picture { opacity: 0; transition: opacity 1600ms var(--ease); }
  .opening.is-photo picture { opacity: 1; }
  .opening.is-photo img { animation: breathe 6s cubic-bezier(.2, .7, .2, 1) forwards; }
  @keyframes breathe { from { transform: scale(1.06); } to { transform: scale(1); } }
  /* 題は 1 文字 40ms 間隔 */
  .has-opening .opening .eyebrow, .has-opening .opening .ch, .has-opening .opening .tagline, .has-opening .opening .cue { opacity: 0; }
  .has-opening .opening .ch { transition: opacity 600ms var(--ease); transition-delay: calc(var(--i, 0) * 40ms); }
  .opening.is-title .ch, .opening.is-title .eyebrow { opacity: 1; }
  .has-opening .opening .eyebrow { transition: opacity 900ms var(--ease); }
  .has-opening .opening .tagline { transition: opacity 900ms var(--ease); }
  .opening.is-tagline .tagline { opacity: 1; }
  .has-opening .opening .cue { transition: opacity 900ms var(--ease); }
  .opening.is-done .cue { opacity: .8; }
  .opening.is-done .cue::after { animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
  @keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }
  /* スキップ後はすべて即時 */
  .opening.is-skipped *, .opening.is-skipped picture, .opening.is-skipped .ch { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
  @media (prefers-reduced-motion: reduce) {
    .drop, .opening img, .opening .cue::after { animation: none !important; }
    .has-opening .drop { display: none; }
    .has-opening .opening .ch { transition-delay: 0ms; }
  }
}