:root {
  --ink: #f2ede4;
  --dim: #8d8579;
  --amber: #e9c07a;
  --bar: 5.5vh;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #000;
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body { cursor: default; }
body.playing { cursor: none; }

/* ---------- gate ---------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: #000;
  text-align: center;
  transition: opacity 1.1s ease, visibility 1.1s;
}
.gate.gone { opacity: 0; visibility: hidden; }

.gate-inner { padding: 8vw; animation: rise 1.4s cubic-bezier(.2,.7,.2,1) both; }

.gate-kicker {
  font-size: clamp(10px, 1.5vw, 13px);
  letter-spacing: .55em;
  color: var(--dim);
  margin-bottom: 2.2rem;
  text-indent: .55em;
}

.gate-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 7vw, 76px);
  letter-spacing: .01em;
  line-height: 1.05;
}

.gate-note {
  margin-top: 1.6rem;
  font-size: 11px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #4d4740;
  text-indent: .38em;
  animation: pulse 1.8s ease-in-out infinite;
}
.gate-note.ready { display: none; }

.begin {
  display: none;
  margin: 2.4rem auto 0;
  padding: 1.05rem 3.4rem;
  background: transparent;
  border: 1px solid #3a352e;
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .42em;
  text-indent: .42em;
  cursor: pointer;
  transition: border-color .5s, background .5s, letter-spacing .5s;
}
.begin.on { display: block; animation: rise 1s cubic-bezier(.2,.7,.2,1) both; }
.begin:hover { border-color: var(--amber); background: rgba(233,192,122,.06); }

.gate-hint {
  margin-top: 1.8rem;
  font-size: 10px;
  letter-spacing: .3em;
  color: #35312b;
  text-indent: .3em;
}

/* ---------- stage ---------- */

#app { position: fixed; inset: 0; opacity: 0; transition: opacity .8s ease; }
#app.live { opacity: 1; }

.stage { position: absolute; inset: 0; background: #000; }

.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fade, 1200ms) ease;
}
.layer.in { opacity: 1; }

.media { position: absolute; inset: 0; overflow: hidden; }

.media img,
.media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 45%);
  will-change: transform;
}

/* dikey kareler tam görünsün diye: arkada bulanık kopya, önde sığdırılmış hâli */
.media .backdrop {
  object-fit: cover;
  object-position: 50% 50%;
  filter: blur(42px) saturate(.55) brightness(.32);
  transform: scale(1.25);
}

.media .fitted { object-fit: contain; }
.media img.fitted { filter: saturate(.92) contrast(1.03) brightness(.94); }
.media img.covered { filter: saturate(.88) contrast(1.04) brightness(.84); }

.scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.42) 26%, rgba(0,0,0,0) 58%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

/* ---------- ken burns ---------- */

@keyframes kbIn   { from { transform: scale(1.02) translate3d(0,0,0); }        to { transform: scale(1.16) translate3d(-1.2%, -1%, 0); } }
@keyframes kbOut  { from { transform: scale(1.18) translate3d(1.4%, .8%, 0); } to { transform: scale(1.03) translate3d(0,0,0); } }
@keyframes kbDrift{ from { transform: scale(1.12) translate3d(-2%, 0, 0); }    to { transform: scale(1.12) translate3d(2%, -1.5%, 0); } }
@keyframes kbPush { from { transform: scale(1.0); }                            to { transform: scale(1.28); } }
@keyframes kbSoft { from { transform: scale(1.07); }                           to { transform: scale(1.0); } }

.kb-in    { animation: kbIn    var(--kbdur, 9s) linear both; }
.kb-out   { animation: kbOut   var(--kbdur, 9s) linear both; }
.kb-drift { animation: kbDrift var(--kbdur, 9s) linear both; }
.kb-push  { animation: kbPush  var(--kbdur, 9s) cubic-bezier(.3,0,.5,1) both; }
.kb-soft  { animation: kbSoft  var(--kbdur, 9s) cubic-bezier(.25,.6,.3,1) both; }

/* ---------- captions ---------- */

.caption {
  position: absolute;
  inset: 0;
  display: flex;
  padding: calc(var(--bar) + 5.5vh) 7vw;
  pointer-events: none;
}
.caption.center { align-items: center; justify-content: center; text-align: center; }
.caption.bottom { align-items: flex-end; justify-content: flex-start; text-align: left; }

.cue-stack { display: flex; flex-direction: column; max-width: 90vw; }
.caption.center .cue-stack { align-items: center; }

/* satırlar açılmadan yer kaplamasın: 0fr -> 1fr yumuşak itiş */
.cue-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .85s cubic-bezier(.2,.7,.2,1);
}
.cue-wrap.on { grid-template-rows: 1fr; }
.caption.center .cue-wrap { justify-items: center; }

.cue {
  min-height: 0;
  overflow: hidden;
  padding-top: .5rem;
  padding-bottom: .14em;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), filter 1s ease;
  text-wrap: balance;
}
.cue.on { opacity: 1; transform: none; filter: blur(0); }
.cue.off { opacity: 0; transform: translateY(-10px); filter: blur(5px); transition-duration: .5s; }

.c-label {
  font-size: clamp(9px, 1.35vw, 12px);
  letter-spacing: .55em;
  text-indent: .55em;
  color: var(--dim);
  text-transform: uppercase;
}

.c-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 6.4vw, 72px);
  line-height: 1.04;
  letter-spacing: .005em;
  max-width: 18ch;
}

.c-name {
  font-size: clamp(11px, 1.7vw, 14px);
  letter-spacing: .46em;
  text-indent: .46em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .6rem;
}

.c-line {
  font-family: var(--serif);
  font-size: clamp(21px, 3.5vw, 40px);
  line-height: 1.24;
  letter-spacing: .005em;
  max-width: 21ch;
}

.c-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 2.1vw, 24px);
  color: #b6ada0;
}

.c-small {
  font-size: clamp(10px, 1.3vw, 12px);
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--dim);
  text-transform: uppercase;
  margin-top: .5rem;
}

.c-beat {
  font-family: var(--serif);
  font-size: clamp(38px, 9vw, 104px);
  line-height: 1;
  letter-spacing: -.01em;
  max-width: 12ch;
}

.c-finale {
  font-family: var(--serif);
  font-size: clamp(34px, 7.6vw, 92px);
  line-height: 1.03;
  letter-spacing: .005em;
  background: linear-gradient(100deg, #fff5e2 0%, var(--amber) 42%, #fff5e2 62%, #f0cd93 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s ease-in-out infinite;
  max-width: 13ch;
}

.c-slate {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(20px, 4.2vw, 46px);
  letter-spacing: .3em;
  text-indent: .3em;
  color: #d8d2c6;
  text-shadow: 0 0 22px rgba(216,210,198,.28);
}

/* ---------- slate scene ---------- */

.layer[data-type="slate"] .media { background: #050505; }
.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
  opacity: .6;
  animation: roll 7s linear infinite;
}

/* ---------- video tag ---------- */

.vtag {
  position: absolute;
  top: calc(var(--bar) + 3vh);
  left: 7vw;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: clamp(9px, 1.3vw, 12px);
  letter-spacing: .26em;
  color: rgba(242,237,228,.5);
  opacity: 0;
  animation: tag 4.5s ease both;
}
@keyframes tag { 0%,8% { opacity: 0 } 16%,55% { opacity: 1 } 100% { opacity: 0 } }

/* ---------- bokeh for the finale ---------- */

.sparks { position: absolute; inset: 0; overflow: hidden; }
.sparks i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233,192,122,.55) 0%, rgba(233,192,122,0) 70%);
  animation: float linear infinite;
}

/* ---------- overlays ---------- */

.fx { position: absolute; inset: 0; pointer-events: none; }

.grain {
  opacity: .16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 700ms steps(4) infinite;
}

.vignette {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 42%, rgba(0,0,0,.72) 100%);
}

.flash {
  background: #fff;
  opacity: 0;
  mix-blend-mode: screen;
}
.flash.hit { animation: hit .42s ease-out; }
@keyframes hit { 0% { opacity: .55 } 100% { opacity: 0 } }

.bars { position: absolute; inset: 0; pointer-events: none; }
.bar {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--bar);
  background: #000;
  transform: scaleY(0);
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1);
}
.bar-top { top: 0; transform-origin: top; }
.bar-bot { bottom: 0; transform-origin: bottom; }
#app.live .bar { transform: scaleY(1); }

.timeline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.07);
  z-index: 5;
}
#timelineFill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(233,192,122,.35), var(--amber));
}

.sound {
  position: absolute;
  left: 3.2vw;
  bottom: calc(var(--bar) / 2);
  transform: translateY(50%);
  z-index: 6;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .28;
  transition: opacity .4s;
}
.sound:hover { opacity: .9; }

.wave { display: flex; align-items: center; gap: 3px; height: 14px; }
.wave i {
  width: 2px;
  height: 100%;
  background: var(--ink);
  transform-origin: center;
  animation: eq 1.1s ease-in-out infinite;
}
.wave i:nth-child(2) { animation-delay: .18s }
.wave i:nth-child(3) { animation-delay: .36s }
.sound.muted .wave i { animation: none; transform: scaleY(.18); }

/* ---------- interactive button inside a scene ---------- */

.choice {
  pointer-events: auto;
  margin-top: 2.6rem;
  padding: 1rem 3rem;
  background: transparent;
  border: 1px solid #3a352e;
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .42em;
  text-indent: .42em;
  cursor: pointer;
  opacity: 0;
  transition: opacity .9s ease, border-color .4s, background .4s;
}
.choice.on { opacity: 1; }
.choice:hover { border-color: var(--amber); background: rgba(233,192,122,.07); }

/* ---------- keyframes ---------- */

@keyframes rise    { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes pulse   { 0%,100% { opacity: .35 } 50% { opacity: .9 } }
@keyframes shimmer { 0%,100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
@keyframes roll    { from { transform: translateY(0) } to { transform: translateY(3px) } }
@keyframes eq      { 0%,100% { transform: scaleY(.3) } 50% { transform: scaleY(1) } }
@keyframes float   { from { transform: translate3d(0, 12vh, 0); opacity: 0 }
                     12% { opacity: 1 }
                     88% { opacity: 1 }
                     to { transform: translate3d(4vw, -75vh, 0); opacity: 0 } }
@keyframes grain {
  0%   { transform: translate(0,0) }
  25%  { transform: translate(-3%, 2%) }
  50%  { transform: translate(2%, -3%) }
  75%  { transform: translate(-2%, -2%) }
  100% { transform: translate(3%, 1%) }
}

/* ---------- mobile ---------- */

@media (max-width: 720px) {
  :root { --bar: 3.5vh; }
  .caption { padding: calc(var(--bar) + 4vh) 8vw; }
  .cue-stack { max-width: 92vw; }
  .media .backdrop { filter: blur(28px) saturate(.55) brightness(.28); }
}

@media (max-height: 520px) {
  :root { --bar: 3vh; }
}