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

:root {
  --ink: #f7f7f2;
  --paper: #f3f1ed;
  --dark: #080b0e;
}

html, body {
  min-height: 100%;
  background: var(--paper);
  font-family: "nimbus-sans-extended", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body { color: var(--ink); }

.poster-shell {
  min-height: 100vh;
  background: var(--paper);
}

/* ── Hero image field ── */

.image-field {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--dark);
}

.bg-photo {
  position: relative;
  width: 100%;
  margin-top: -30%;
}

.bg-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.82) contrast(1.08) brightness(0.78);
}

/* ── Atmosphere layers ── */

.motion-smear {
  position: absolute;
  inset: -6vw;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.12) 0%, transparent 18%, transparent 78%, rgba(0,0,0,0.28) 100%),
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 32%, transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 42%, rgba(0,0,0,0.42) 100%);
  mix-blend-mode: screen;
  opacity: 0.78;
  z-index: 1;
  will-change: transform;
}

.parallax-fog {
  position: absolute;
  inset: -8vw;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 50%);
          mask-image: linear-gradient(to bottom, black 30%, transparent 50%);
}

.parallax-fog span {
  position: absolute;
  width: var(--w);
  height: calc(var(--w) * 0.46);
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(235,242,244,var(--o)) 0%, rgba(235,242,244,0.04) 42%, transparent 72%);
  filter: blur(28px);
}

/* ── Cloud parallax layers ── */

.cloud-layer {
  position: absolute;
  inset: -15% -15%;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  transition: transform 1.4s cubic-bezier(0.16, 0.7, 0.3, 1);
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 50%);
          mask-image: linear-gradient(to bottom, black 30%, transparent 50%);
}

.cloud-layer .blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c, rgba(220,230,235,0.5)) 0%, transparent 65%);
  filter: blur(var(--blur, 60px));
  mix-blend-mode: screen;
}

.cloud-layer.dark .blob { mix-blend-mode: multiply; }
.cloud-layer.back  .blob { --c: rgba(10, 16, 22, 0.70); --blur: 90px; }
.cloud-layer.mid   .blob { --c: rgba(190, 205, 218, 0.18); --blur: 70px; }
.cloud-layer.front .blob { --c: rgba(245, 248, 252, 0.20); --blur: 55px; }

/* ── Mobile cloud boost ── */
@media (max-width: 760px) {
  .cloud-layer.mid   .blob { --c: rgba(190, 205, 218, 0.45); --blur: 50px; }
  .cloud-layer.front .blob { --c: rgba(245, 248, 252, 0.50); --blur: 35px; }
  .cloud-layer.back  { animation-duration: 60s; }
  .cloud-layer.mid   { animation-duration: 40s; }
  .cloud-layer.front { animation-duration: 28s; }
}

.cloud-layer.back  { animation: float-back 100s ease-in-out infinite alternate; }
.cloud-layer.mid   { animation: float-mid   70s ease-in-out infinite alternate; }
.cloud-layer.front { animation: float-front  50s ease-in-out infinite alternate; }

@keyframes float-back  { from { background-position: 0 0; } to { background-position: -180px 60px; } }
@keyframes float-mid   { from { background-position: 0 0; } to { background-position: 240px -120px; } }
@keyframes float-front { from { background-position: 0 0; } to { background-position: -360px 180px; } }

/* ── Film grain + vignette ── */

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAxICAwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMC41NSAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
}

/* ── Play button ── */

.center-stack {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 0;
  transform: translate(-50%, -50%);
  width: auto;
  text-align: center;
  pointer-events: none;
}

.center-stack .play-button {
  pointer-events: auto;
}

.play-button {
  width: 80px;
  height: 80px;
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s, opacity 0.25s;
  position: relative;
  padding: 0;
}

.play-button svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: rgba(255,255,255,0.7);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  transition: stroke 0.25s;
}

.play-button::before,
.play-button::after { display: none; }

.play-button:hover { transform: scale(1.08); }
.play-button:hover svg { stroke: rgba(255,255,255,0.95); }

/* ── Title ── */

.title {
  font-size: clamp(40px, 5.4vw, 80px);
  position: absolute;
  right: clamp(30px, 4.8vw, 74px);
  top: 52%;
  z-index: 5;
  width: auto;
  text-align: right;
  line-height: 0.78;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: rgba(235,238,236,0.78);
  text-shadow: 0 3px 26px rgba(0,0,0,0.5);
  transform: scaleY(1.35);
  transform-origin: bottom right;
}

.title span { display: block; }
.title .line-domain { letter-spacing: 0.05em; }

/* ── Bottom band ── */

.bottom-band {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12vh 40px 16vh;
}

.socials {
  position: absolute;
  left: clamp(30px, 4.8vw, 74px);
  top: 60%;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.socials a {
  color: rgba(235,238,236,0.78);
  text-decoration: none;
  font-family: "nimbus-sans-extended", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.78;
  transition: opacity 0.25s;
  text-shadow: 0 3px 26px rgba(0,0,0,0.5);
}

.socials a:hover { opacity: 1; }

.credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8vh;
  text-align: center;
}

.credit-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.credit-label {
  font-family: "nimbus-sans-extended", sans-serif;
  font-size: clamp(11px, 1.2vw, 16px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dark);
  opacity: 0.4;
  margin-bottom: 10px;
}

.credit-name {
  font-family: "nimbus-sans-extended", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.8vw, 38px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dark);
  opacity: 0.65;
  line-height: 1.2;
}


/* ── Video player overlay ── */

.player {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #000;
  display: none;
}

.player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.image-field.playing .player { display: block; }
.image-field.playing .center-stack { display: none; }

/* ── Mobile ── */

@media (max-width: 760px) {
  .image-field {
    height: 100vh;
  }
  .bg-photo {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .bg-photo img {
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
  .center-stack {
    left: 50%;
    top: 40%;
    bottom: auto;
    gap: 0;
  }
  .title {
    right: auto;
    left: 50%;
    top: auto;
    bottom: 26%;
    font-size: clamp(29px, 8.1vw, 47px);
    transform: translateX(-50%) scaleY(1.35);
    transform-origin: center bottom;
    text-align: center;
  }
  .title .line-domain {
    left: 0.35em;
  }
  .socials {
    left: 18px;
    top: auto;
    bottom: 18%;
    gap: 16px;
  }
  .socials a {
    font-size: 11px;
    letter-spacing: 0.2em;
  }
  .play-button {
    width: 64px;
    height: 64px;
  }
  .play-button svg {
    width: 42px;
    height: 42px;
  }
  .cloud-layer {
    inset: -10% -10%;
  }
  .cloud-layer.back .blob:nth-child(1) { top: 5%; }
  .cloud-layer.back .blob:nth-child(2) { top: 15%; }
  .cloud-layer.back .blob:nth-child(3) { top: 35%; }
  .cloud-layer.mid .blob:nth-child(1) { top: 10%; }
  .cloud-layer.mid .blob:nth-child(2) { top: 25%; }
  .cloud-layer.mid .blob:nth-child(3) { top: 40%; }
  .cloud-layer.mid .blob:nth-child(4) { top: 55%; }
  .cloud-layer.front .blob:nth-child(1) { top: 15%; }
  .cloud-layer.front .blob:nth-child(2) { top: 35%; }
  .cloud-layer.front .blob:nth-child(3) { top: 50%; }
  .parallax-fog {
    inset: -5vw;
  }
  .bottom-band {
    padding: 10vh 24px 12vh;
  }
  .credits {
    gap: 6vh;
  }
  .credit-name {
    font-size: clamp(22px, 7vw, 36px);
  }
}

/* ── Mobile landscape ── */

@media (max-height: 500px) and (orientation: landscape) {
  .poster-shell {
    background: var(--dark);
  }
  .image-field {
    height: 100vh;
    width: 100vw;
  }
  .bg-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .bg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
  }
  .center-stack {
    top: 35%;
  }
  .play-button {
    width: 48px;
    height: 48px;
  }
  .play-button svg {
    width: 32px;
    height: 32px;
  }
  .title {
    right: 24px;
    left: auto;
    top: auto;
    bottom: 12%;
    font-size: clamp(24px, 5vh, 40px);
    transform: scaleY(1.35);
    transform-origin: bottom right;
    text-align: right;
  }
  .socials {
    left: 24px;
    top: auto;
    bottom: 12%;
    gap: 14px;
  }
  .socials a {
    font-size: 9px;
  }
}