/* ---------------------------------------------------------------
   Fırtına — stil
   Renkler tek bir yerden yönetilir, aşağıdaki :root bloğu.
   --------------------------------------------------------------- */

:root {
  /* gece / taş / ıslak çelik */
  --void:      #07090b;
  --pitch:     #0d1114;
  --ash:       #171d21;
  --slate:     #222a2f;

  /* yazı: bordo artık baskın renk değil, hafif bir editoryal vurgu */
  --bordo:     #a96870;
  --bordo-dim: #70444a;

  /* şimşek çaktığında JS tarafından 0 → 1 arası güncellenir */
  --lit: 0;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  /* manzara canvas'a çizilir; bu gradyan yalnızca o yüklenene kadar görünür */
  background:
    linear-gradient(to bottom,
      #161c20 0%,
      #0d1115 48%,
      #0a0d10 78%,
      #07090b 100%);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  color: var(--bordo);
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}

/* --- katman sırası ------------------------------------------------
   1 sahne (bulut, yağmur, şimşek, sıçrama, cam damlaları)
   2 şimşek parlaması
   3 zemin sisi
   4 yazı
   5 vinyet
   ----------------------------------------------------------------- */

#scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  mix-blend-mode: screen;
  background:
    radial-gradient(62% 40% at var(--flash-x, 50%) 10%,
      rgba(216, 228, 239, .38) 0%,
      rgba(169, 188, 205, .14) 44%,
      transparent 78%);
}

.haze {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 42vh;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(5, 7, 8, .74) 0%,
      rgba(11, 14, 16, .30) 42%,
      transparent 100%);
}

.haze::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(30, 43, 49, .10),
      rgba(10, 15, 18, .015) 46%,
      rgba(8, 12, 14, .11) 100%),
    radial-gradient(90% 45% at 58% 55%, rgba(126, 151, 159, .06), transparent 76%);
  mix-blend-mode: screen;
}

.haze::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(6, 9, 11, .16));
  mix-blend-mode: multiply;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(108% 82% at 50% 44%,
    transparent            56%,
    rgba(4, 4, 6, .24)     84%,
    rgba(3, 3, 4, .50)    100%);
}

/* --- yazı --------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  min-height: 100%;
  min-height: 100svh;
  height: 100%;
  height: 100dvh;
  padding:
    calc(24px + env(safe-area-inset-top, 0px))
    clamp(24px, 6.2vw, 92px)
    calc(clamp(58px, 10.5vh, 126px) + env(safe-area-inset-bottom, 0px));
}

.quote {
  margin: 0;
  width: min(100%, 34rem);
  max-width: min(34rem, 88vw);
  font-size: clamp(1.08rem, 2.75vw, 1.62rem);
  text-align: left;
  filter: brightness(calc(1 + var(--lit) * .16));
}

.quote p {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .012em;
  text-wrap: pretty;
  color: rgba(205, 202, 197, .78);
  text-shadow:
    0 2px 10px rgba(0, 0, 0, .82),
    0 1px 2px rgba(0, 0, 0, .72);
}

.quote p:first-child {
  max-width: 24em;
}

.quote p + p {
  margin-top: .92em;
  padding-left: clamp(18px, 3.6vw, 48px);
  color: rgba(177, 174, 169, .54);
  letter-spacing: .02em;
}

.js .quote {
  opacity: .18;
  transform: translateY(8px);
}

.js .quote.lit {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 2.3s cubic-bezier(.2, .65, .25, 1),
    transform 2.8s cubic-bezier(.2, .65, .25, 1);
}

/* hafif film grenine benzer kırılma: görüntüyü "temiz dijital" olmaktan çıkarır */
.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 23, 26, .12), rgba(9, 13, 15, .035) 50%, rgba(3, 5, 6, .18) 100%),
    radial-gradient(105% 88% at 52% 44%, transparent 54%, rgba(2, 4, 5, .18) 82%, rgba(1, 2, 3, .34) 100%);
  mix-blend-mode: multiply;
}

.vignette::after {
  content: "";
  position: absolute;
  inset: -12%;
  opacity: .018;
  background-image:
    radial-gradient(circle at 17% 24%, rgba(255,255,255,.42) 0 .45px, transparent .72px),
    radial-gradient(circle at 63% 77%, rgba(255,255,255,.32) 0 .38px, transparent .7px),
    radial-gradient(circle at 84% 39%, rgba(255,255,255,.22) 0 .32px, transparent .64px);
  background-size: 7px 7px, 9px 9px, 11px 11px;
  mix-blend-mode: screen;
  animation: filmDrift 11s steps(2, end) infinite;
}

@keyframes filmDrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  23%      { transform: translate3d(-.35%, .22%, 0); }
  47%      { transform: translate3d(.22%, -.18%, 0); }
  71%      { transform: translate3d(.38%, .14%, 0); }
}

/* --- ekran uçları -------------------------------------------------- */

/* yatay tutulan telefonlar: yükseklik dar, satırları alçalt ve genişlet */
@media (max-height: 470px) {
  .stage       { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .quote       { font-size: clamp(.94rem, 3.9vh, 1.28rem); max-width: 31em; }
  .quote p     { line-height: 1.34; }
  .quote p + p { margin-top: 12px; padding-left: 18px; }
}

@media (min-width: 1100px) {
  .quote { max-width: 31rem; }
}

/* --- erişilebilirlik ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .flash       { display: none; }
  .quote       { filter: none; }
  .js .quote   { opacity: 1; }
  .vignette::after { animation: none; }
}

/* --- telefon dikey ----------------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {
  .stage {
    padding-left: max(20px, 6vw);
    padding-right: max(20px, 6vw);
    padding-bottom: calc(clamp(52px, 9vh, 92px) + env(safe-area-inset-bottom, 0px));
  }

  .quote {
    max-width: 92vw;
    font-size: clamp(1.06rem, 5.1vw, 1.32rem);
  }

  .quote p {
    line-height: 1.3;
    letter-spacing: 0;
  }

  .quote p:first-child {
    max-width: 18em;
  }

  .quote p + p {
    margin-top: .72em;
    padding-left: clamp(10px, 4vw, 20px);
  }

  .haze {
    height: 28vh;
  }
}

/* çok dar telefonlar */
@media (max-width: 360px) and (orientation: portrait) {
  .stage {
    padding-left: 18px;
    padding-right: 18px;
  }

  .quote {
    max-width: calc(100vw - 36px);
    font-size: 1.02rem;
  }
}

/* yatay telefonlar: adres çubuğu nedeniyle yüksekliği değil gerçek görünür alanı önemse */
@media (max-width: 900px) and (orientation: landscape) {
  .stage {
    padding: 16px max(20px, 4vw) calc(22px + env(safe-area-inset-bottom, 0px));
  }

  .quote {
    max-width: min(34rem, 78vw);
    font-size: clamp(.94rem, 3.7vw, 1.28rem);
  }
}