/* =========================================================
   ZEYNEP — SCROLL BIRTHDAY PAGE
   FINAL STYLE.CSS
   ========================================================= */


/* =========================================================
   RESET
========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  overflow-x: hidden;

  background: #111;
  color: #fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   MAIN SCENE
========================================================= */

.scene {
  position: relative;

  width: 100%;

  /*
    Scroll hassasiyetini düşürmek için
    sahne uzun tutuluyor.
  */
  height: 450vh;
}


/* =========================================================
   STICKY STAGE
========================================================= */

.stage {
  position: sticky;

  top: 0;

  width: 100%;
  height: 100vh;

  overflow: hidden;

  background: #111;
}


/* =========================================================
   BACKGROUND
========================================================= */

.background {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  z-index: 1;

  transform: scale(1.02);

  pointer-events: none;
  user-select: none;

  will-change: transform;
}


/* =========================================================
   BACKGROUND DARK OVERLAY
========================================================= */

.stage::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.15) 45%,
      rgba(0, 0, 0, 0.05) 70%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.05) 0%,
      rgba(0, 0, 0, 0.02) 55%,
      rgba(0, 0, 0, 0.30) 100%
    );
}


/* =========================================================
   PERSON
========================================================= */

.person {
  position: absolute;

  /*
    Person sağ tarafta kalıyor.
  */
  right: 3vw;
  bottom: 0;

  width: min(53vw, 720px);
  height: auto;

  z-index: 3;

  /*
    JS sadece bunu değiştiriyor:
    --scale: 1 → 1.22
  */
  --scale: 1;

  /*
    Sağ alt noktadan büyür.
    Böylece sağdaki konumu korunur.
  */
  transform-origin: right bottom;

  pointer-events: none;
  user-select: none;

  will-change: transform;

  animation:
    personFloat
    3.8s
    ease-in-out
    infinite;

  filter:
    drop-shadow(
      0 18px 28px
      rgba(0, 0, 0, 0.18)
    );
}


/* =========================================================
   PERSON IDLE ANIMATION
========================================================= */

@keyframes personFloat {

  0% {
    transform:
      translateX(0)
      translateY(0)
      rotate(-0.35deg)
      scale(var(--scale));
  }

  25% {
    transform:
      translateX(-4px)
      translateY(-3px)
      rotate(-0.10deg)
      scale(var(--scale));
  }

  50% {
    transform:
      translateX(-8px)
      translateY(-8px)
      rotate(0.35deg)
      scale(var(--scale));
  }

  75% {
    transform:
      translateX(-3px)
      translateY(-4px)
      rotate(0.10deg)
      scale(var(--scale));
  }

  100% {
    transform:
      translateX(0)
      translateY(0)
      rotate(-0.35deg)
      scale(var(--scale));
  }
}


/* =========================================================
   TEXT LAYER
========================================================= */

.text-layer {
  position: absolute;

  inset: 0;

  z-index: 4;

  pointer-events: none;
}


/* =========================================================
   SCROLL TEXT
========================================================= */

.scroll-text {
  position: absolute;

  /*
    Person sağda olduğu için
    metin biraz sola alınmış durumda.
  */
  left: 27%;
  top: 50%;

  width: min(48vw, 760px);

  transform:
    translate(-50%, -50%)
    translateY(30px);

  text-align: left;

  opacity: 0;

  transition:
    opacity 0.4s ease,
    transform 0.5s ease;

  will-change:
    opacity,
    transform;
}


/* Aktif metin */

.scroll-text.active {
  opacity: 1;

  transform:
    translate(-50%, -50%)
    translateY(0);
}


/* =========================================================
   DATE BADGE
========================================================= */

.date {
  display: inline-block;

  margin-bottom: 22px;

  padding:
    10px
    18px;

  border:
    1px solid
    rgba(255, 255, 255, 0.55);

  border-radius: 999px;

  background:
    rgba(0, 0, 0, 0.22);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  font-size:
    clamp(
      0.8rem,
      1.2vw,
      1rem
    );

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


/* =========================================================
   HEADINGS
========================================================= */

.scroll-text h1,
.scroll-text h2 {
  margin: 0;

  font-weight: 900;

  line-height: 0.96;

  letter-spacing: -0.035em;

  text-transform: uppercase;

  text-shadow:
    0 3px 18px
    rgba(0, 0, 0, 0.45);
}


.scroll-text h1 {
  font-size:
    clamp(
      3.5rem,
      7vw,
      7.5rem
    );
}


.scroll-text h2 {
  font-size:
    clamp(
      2.7rem,
      5.7vw,
      6rem
    );
}


/* =========================================================
   PARAGRAPH
========================================================= */

.scroll-text p {
  margin-top: 22px;

  max-width: 600px;

  font-size:
    clamp(
      1.05rem,
      1.7vw,
      1.5rem
    );

  font-weight: 500;

  line-height: 1.5;

  text-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.45);
}


/* =========================================================
   FINAL TEXT
========================================================= */

.final-text {
  position: absolute;

  left: 28%;
  top: 49%;

  width: min(50vw, 820px);

  transform:
    translate(-50%, -50%)
    scale(0.90)
    translateY(30px);

  text-align: left;

  opacity: 0;

  z-index: 5;

  transition:
    opacity 0.55s ease,
    transform 0.8s
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );

  pointer-events: none;

  will-change:
    opacity,
    transform;
}


.final-text.active {
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1)
    translateY(0);
}


/* =========================================================
   FINAL TITLE
========================================================= */

.final-text h1 {
  margin: 0;

  font-size:
    clamp(
      3.4rem,
      6.5vw,
      7rem
    );

  font-weight: 900;

  line-height: 0.9;

  letter-spacing: -0.045em;

  text-transform: uppercase;

  text-shadow:
    0 5px 30px
    rgba(0, 0, 0, 0.55);
}


/* ZEYNEP */

.final-text .name {
  display: block;

  margin-top: 12px;

  font-size:
    clamp(
      4.4rem,
      8vw,
      9rem
    );

  line-height: 0.82;
}


/* =========================================================
   FINAL SUBTEXT
========================================================= */

.final-text p {
  margin-top: 30px;

  max-width: 550px;

  font-size:
    clamp(
      1rem,
      1.6vw,
      1.45rem
    );

  line-height: 1.5;

  letter-spacing: 0.01em;

  text-shadow:
    0 2px 15px
    rgba(0, 0, 0, 0.55);
}


/* =========================================================
   SCROLL HINT
========================================================= */

.scroll-hint {
  position: absolute;

  left: 50%;
  bottom: 26px;

  transform:
    translateX(-50%);

  z-index: 6;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  color:
    rgba(255, 255, 255, 0.8);

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  pointer-events: none;

  animation:
    scrollHintMove
    2s
    ease-in-out
    infinite;

  transition:
    opacity
    0.3s
    ease;
}


.scroll-hint::after {
  content: "↓";

  font-size: 22px;

  line-height: 1;
}


@keyframes scrollHintMove {

  0%,
  100% {
    transform:
      translateX(-50%)
      translateY(0);
  }

  50% {
    transform:
      translateX(-50%)
      translateY(7px);
  }
}


/* =========================================================
   MUSIC BUTTON
========================================================= */

.music-button {
  position: fixed;

  top: 22px;
  right: 22px;

  width: 52px;
  height: 52px;

  z-index: 100;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, 0.38);

  border-radius: 50%;

  background:
    rgba(0, 0, 0, 0.30);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  color: white;

  font-size: 20px;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.music-button:hover {
  transform:
    scale(1.08);

  background:
    rgba(0, 0, 0, 0.50);

  border-color:
    rgba(255, 255, 255, 0.75);
}


.music-button:active {
  transform:
    scale(0.94);
}


.music-button.playing {
  animation:
    musicPulse
    2s
    ease-in-out
    infinite;
}


@keyframes musicPulse {

  0%,
  100% {
    box-shadow:
      0 0 0 0
      rgba(255, 255, 255, 0.20);
  }

  50% {
    box-shadow:
      0 0 0 11px
      rgba(255, 255, 255, 0);
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .person {
    right: -3vw;

    width:
      min(
        64vw,
        680px
      );
  }


  .scroll-text {
    left: 30%;

    width: 52vw;
  }


  .final-text {
    left: 30%;

    width: 54vw;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .scene {
    height: 450vh;
  }


  .background {
    object-position:
      center center;
  }


  .person {
    right: -11vw;
    bottom: 0;

    width:
      min(
        88vw,
        650px
      );

    transform-origin:
      right bottom;
  }


  /*
    Telefonda metni yukarı ve sola
    alıyoruz ki person ile çakışmasın.
  */

  .scroll-text {
    left: 6%;
    top: 23%;

    width: 88%;

    transform:
      translateY(30px);

    text-align: left;
  }


  .scroll-text.active {
    transform:
      translateY(0);
  }


  .scroll-text h1 {
    font-size:
      clamp(
        3rem,
        14vw,
        5.5rem
      );
  }


  .scroll-text h2 {
    font-size:
      clamp(
        2.5rem,
        11vw,
        4.5rem
      );
  }


  .scroll-text p {
    max-width: 85%;

    font-size:
      1rem;
  }


  .final-text {
    left: 6%;
    top: 18%;

    width: 88%;

    transform:
      scale(0.92)
      translateY(30px);

    text-align: left;
  }


  .final-text.active {
    transform:
      scale(1)
      translateY(0);
  }


  .final-text h1 {
    font-size:
      clamp(
        2.8rem,
        12vw,
        5rem
      );
  }


  .final-text .name {
    font-size:
      clamp(
        4rem,
        18vw,
        7rem
      );
  }


  .final-text p {
    margin-top: 20px;

    max-width: 90%;
  }


  .music-button {
    top: 15px;
    right: 15px;

    width: 46px;
    height: 46px;

    font-size: 18px;
  }


  .scroll-hint {
    bottom: 18px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .person {
    right: -16vw;

    width: 100vw;
  }


  .scroll-text {
    top: 20%;
  }


  .final-text {
    top: 17%;
  }


  .date {
    padding:
      8px
      14px;

    margin-bottom: 16px;

    font-size: 0.72rem;
  }


  .scroll-text h1 {
    font-size:
      clamp(
        2.7rem,
        15vw,
        4.7rem
      );
  }


  .scroll-text h2 {
    font-size:
      clamp(
        2.2rem,
        12vw,
        4rem
      );
  }


  .final-text h1 {
    font-size:
      clamp(
        2.5rem,
        13vw,
        4.5rem
      );
  }


  .final-text .name {
    font-size:
      clamp(
        3.8rem,
        20vw,
        6.5rem
      );
  }

}


/* =========================================================
   LANDSCAPE MOBILE
========================================================= */

@media
(max-height: 550px)
and
(orientation: landscape) {

  .person {
    right: 1vw;

    width:
      min(
        47vw,
        520px
      );
  }


  .scroll-text {
    left: 25%;
    top: 45%;

    width: 45vw;
  }


  .final-text {
    left: 25%;
    top: 45%;

    width: 45vw;
  }


  .scroll-text h1 {
    font-size:
      clamp(
        2.5rem,
        7vw,
        4.5rem
      );
  }


  .scroll-text h2 {
    font-size:
      clamp(
        2rem,
        5vw,
        3.5rem
      );
  }


  .final-text h1 {
    font-size:
      clamp(
        2.4rem,
        6vw,
        4rem
      );
  }


  .final-text .name {
    font-size:
      clamp(
        3rem,
        8vw,
        5rem
      );
  }

}
/* =========================================================
   FINAL VIDEO
========================================================= */

.video-section {
  position: relative;

  width: 100%;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 80px 5vw;

  background: #0b0b0b;

  z-index: 10;
}


.video-wrapper {
  position: relative;

  width: min(1100px, 100%);

  border-radius: 18px;

  overflow: hidden;

  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.55);
}


.final-video {
  display: block;

  width: 100%;
  height: auto;

  background: #000;
}


/* video geldiğinde butonu daha görünür yap */

body.video-visible .music-button {
  background:
    rgba(0, 0, 0, 0.75);

  border-color:
    rgba(255, 255, 255, 0.8);

  transform: scale(1.08);
}


/* mobil */

@media (max-width: 768px) {

  .video-section {
    padding: 40px 0;

    min-height: 100vh;
  }


  .video-wrapper {
    width: 100%;

    border-radius: 0;
  }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  html {
    scroll-behavior:
      auto;
  }


  .person {
    animation: none;

    transform:
      scale(
        var(--scale)
      );
  }


  .scroll-text,
  .final-text {
    transition: none;
  }


  .scroll-hint,
  .music-button.playing {
    animation: none;
  }

}