/* =========================================================
   INTRO.CSS
   청첩장 첫 화면 / 메인 이미지 / 이름 / 인트로 연출
========================================================= */


/* =========================================================
   1. Intro Layout
========================================================= */

.intro {
  position: relative;

  display: flex;
  flex-direction: column;

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

  min-height: 100svh;

  padding-top:
    clamp(64px, 15vw, 88px);

  padding-right:
    var(--page-padding);

  padding-bottom:
    clamp(42px, 11vw, 54px);

  padding-left:
    var(--page-padding);

  overflow: hidden;

  background:
    var(--color-page);
}


/* =========================================================
   2. Bride / Groom Name
========================================================= */

.intro__name {
  position: relative;

  z-index: 2;

  margin: 0;

  margin-bottom:
    18px;

  color:
    var(--color-ink);

  font-family:
    var(--font-intro-name);

  font-size:
    clamp(36px, 10.5vw, 48px);

  font-weight:
    300;

  line-height:
    0.92;

  letter-spacing:
    -0.04em;
}


.intro__name--bride {
  margin-top:
    24px;

  margin-bottom:
    0;
}


/* =========================================================
   3. Main Stage
========================================================= */

.intro__stage {
  position: relative;

  display: flex;

  width: 100%;

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

  gap:
    14px;

  overflow:
    visible;
}


/* =========================================================
   4. Side Text
========================================================= */

.intro__side {
  position: absolute;

  top: 50%;

  z-index: 6;

  margin: 0;

  color:
    var(--color-ink);

  font-family:
    var(--font-intro-side);

  font-size:
    clamp(16px, 2.4vw, 18px);

  font-weight:
    300;

  line-height:
    1.55;

  letter-spacing:
    var(--tracking-wider);

  white-space:
    nowrap;

  writing-mode:
    horizontal-tb;

  transform-origin:
    center;
}


.intro__side--left {
  left:
    clamp(4px, 3vw, 14px);

  transform:
    translate(-50%, -50%)
    rotate(-90deg);
}


.intro__side--right {
  right:
    clamp(4px, 3vw, 14px);

  transform:
    translate(50%, -50%)
    rotate(90deg);
}


/* =========================================================
   5. Soft Oval
========================================================= */

.soft-oval {
  position: relative;

  z-index: 3;

  width:
    min(62vw, 268px);

  aspect-ratio:
    0.68;

  overflow:
    hidden;

  border-radius:
    50% / 44%;

  background:
    radial-gradient(
      circle at 60% 20%,
      rgba(255, 255, 255, 0.68),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      #dac4c0 0%,
      #b79891 44%,
      #765b57 100%
    );

  box-shadow:
    0 18px 32px
    rgba(73, 46, 44, 0.13);
}


.soft-oval.has-image {
  background-position:
    center;

  background-size:
    cover;

  background-repeat:
    no-repeat;
}


/* =========================================================
   6. Image Placeholder
========================================================= */

.soft-oval__placeholder {
  position: absolute;

  z-index: 1;

  inset: 0;

  display: grid;

  place-items: center;

  padding:
    20px;

  color:
    rgba(255, 250, 247, 0.72);

  font-family:
    var(--font-intro-side);

  font-size:
    9px;

  font-weight:
    300;

  line-height:
    1.8;

  letter-spacing:
    var(--tracking-widest);

  text-align:
    center;
}


.soft-oval.has-image
.soft-oval__placeholder {
  opacity:
    0;
}


/* =========================================================
   7. Image Veil
========================================================= */

.soft-oval__veil {
  position: absolute;

  z-index: 2;

  inset: 0;

  opacity:
    1;

  background:
    var(
      --color-overlay,
      rgba(91, 70, 68, 0.68)
    );

  -webkit-backdrop-filter:
    blur(15px)
    brightness(0.72)
    saturate(0.6);

  backdrop-filter:
    blur(15px)
    brightness(0.72)
    saturate(0.6);

  will-change:
    opacity,
    backdrop-filter;
}


.soft-oval.no-overlay
.soft-oval__veil {
  opacity:
    0;

  visibility:
    hidden;
}


.soft-oval.is-script-focus
.soft-oval__veil {
  animation:
    intro-photo-reveal
    450ms
    var(--ease-soft)
    1.75s
    forwards;
}


/* =========================================================
   8. Intro Script
========================================================= */

.intro__script {
  position: absolute;

  z-index: 3;

  top:
    50%;

  right:
    -7%;

  left:
    -7%;

  margin:
    0;

  color:
    #fffaf7;

  font-family:
    var(--font-intro-script);

  font-size:
    clamp(38px, 11vw, 52px);

  font-weight:
    400;

  line-height:
    0.98;

  text-align:
    center;

  pointer-events:
    none;

  opacity:
    0;

  transform:
    translateY(-50%)
    rotate(-4deg);
}


.intro__script.is-writing {
  opacity:
    1;

  animation:
    intro-script-disappear
    700ms
    var(--ease-standard)
    4.2s
    forwards;
}


/* =========================================================
   9. Script Writing Line
========================================================= */

.intro__script-line {
  display:
    block;

  width:
    max-content;

  max-width:
    calc(100% - 20px);

  margin:
    -0.08em auto;

  padding:
    0.16em 0.28em 0.2em;

  white-space:
    nowrap;

  opacity:
    0;

  clip-path:
    inset(0 100% 0 0);
}


.intro__script-line:nth-child(1) {
  animation:
    intro-script-write
    1.7s
    steps(24, end)
    0.4s
    forwards;
}


.intro__script-line:nth-child(2) {
  animation:
    intro-script-write
    1.5s
    steps(18, end)
    1.8s
    forwards;
}


/* =========================================================
   10. Music Toggle
========================================================= */

.music-toggle {
  position: absolute;

  z-index:
    10;

  top:
    clamp(18px, 5vw, 22px);

  right:
    clamp(18px, 5vw, 22px);

  display:
    grid;

  width:
    34px;

  height:
    34px;

  place-items:
    center;

  border:
    1px solid
    var(--color-line);

  border-radius:
    50%;

  background:
    rgba(255, 250, 247, 0.48);

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

  backdrop-filter:
    blur(8px);

  transition:
    transform
    var(--motion-fast)
    var(--ease-standard),

    background-color
    var(--motion-fast)
    var(--ease-standard);
}


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


/* =========================================================
   11. Music Bars
========================================================= */

.music-toggle__bars {
  display:
    flex;

  height:
    14px;

  align-items:
    center;

  gap:
    2px;
}


.music-toggle__bars i {
  display:
    block;

  width:
    2px;

  height:
    6px;

  border-radius:
    2px;

  background:
    var(--color-ink);
}


.music-toggle.is-playing
.music-toggle__bars i:nth-child(1) {
  animation:
    music-bar
    700ms
    ease-in-out
    infinite
    alternate;
}


.music-toggle.is-playing
.music-toggle__bars i:nth-child(2) {
  animation:
    music-bar
    560ms
    ease-in-out
    100ms
    infinite
    alternate;
}


.music-toggle.is-playing
.music-toggle__bars i:nth-child(3) {
  animation:
    music-bar
    620ms
    ease-in-out
    180ms
    infinite
    alternate;
}


/* =========================================================
   12. Scroll Guide
========================================================= */

.intro__scroll {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-top:
    28px;

  color:
    var(--color-muted);

  font-family:
    var(--font-intro-side);

  font-size:
    12x;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    var(--tracking-widest);
}


.intro__scroll span {
  display:
    inline-block;

  width:
    2px;

  height:
    40px;

  background:
    var(--color-accent);

  transform-origin:
    top;

  animation:
    scroll-line
    1.8s
    ease-in-out
    infinite;
}


/* =========================================================
   13. Photo Reveal
========================================================= */

@keyframes intro-photo-reveal {

  0% {
    opacity:
      1;

    background:
      var(
        --color-overlay,
        rgba(91, 70, 68, 0.68)
      );

    -webkit-backdrop-filter:
      blur(15px)
      brightness(0.72)
      saturate(0.6);

    backdrop-filter:
      blur(15px)
      brightness(0.72)
      saturate(0.6);
  }


  100% {
    opacity:
      0;

    background:
      rgba(91, 70, 68, 0);

    -webkit-backdrop-filter:
      blur(0)
      brightness(1)
      saturate(1);

    backdrop-filter:
      blur(0)
      brightness(1)
      saturate(1);

    visibility:
      hidden;
  }

}


/* =========================================================
   14. Script Writing
========================================================= */

@keyframes intro-script-write {

  0% {
    opacity:
      1;

    clip-path:
      inset(0 100% 0 0);
  }


  100% {
    opacity:
      1;

    clip-path:
      inset(0 0 0 0);
  }

}


/* =========================================================
   15. Script Disappear
========================================================= */

@keyframes intro-script-disappear {

  0% {
    opacity:
      1;

    filter:
      blur(0);
  }


  100% {
    opacity:
      0;

    filter:
      blur(3px);

    visibility:
      hidden;
  }

}


/* =========================================================
   16. Small Mobile
========================================================= */

@media (max-width: 360px) {

  .intro {
    padding-top:
      58px;

    padding-bottom:
      38px;
  }


  .intro__name {
    font-size:
      clamp(34px, 10vw, 38px);
  }


  .soft-oval {
    width:
      min(61vw, 238px);
  }


  .intro__script {
    font-size:
      clamp(34px, 10.5vw, 40px);
  }


  .intro__side {
    font-size:
      8.5px;
  }

}


/* =========================================================
   17. Reduced Motion
========================================================= */

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

  .soft-oval.is-script-focus
  .soft-oval__veil {
    animation:
      none;

    opacity:
      0;

    visibility:
      hidden;

    -webkit-backdrop-filter:
      none;

    backdrop-filter:
      none;
  }


  .intro__script,
  .intro__script.is-writing,
  .intro__script-line {
    animation:
      none;

    opacity:
      0;
  }


  .music-toggle__bars i,
  .intro__scroll span {
    animation:
      none;
  }

}


/* =========================================================
   18. Intro Scroll Lock
========================================================= */

html.is-intro-locked,
body.is-intro-locked {
  overflow:
    hidden;

  overscroll-behavior:
    none;
}


body.is-intro-locked {
  touch-action:
    none;
}


/* =========================================================
   19. Intro Music Guide
========================================================= */

.intro__music-guide {
  position:
    fixed;

  z-index:
    9999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  width:
    max-content;

  max-width:
    calc(100vw - 48px);

  padding:
    9px
    15px;

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

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.94);

  box-shadow:
    0 7px 22px
    rgba(0, 0, 0, 0.10);

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

  backdrop-filter:
    blur(12px);

  color:
    rgba(55, 55, 55, 0.88);

  font-family:
    "Noto Sans KR",
    sans-serif;

  font-size:
    13px;

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -0.02em;

  white-space:
    nowrap;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translate(-50%, -100%)
    translateY(-18px)
    scale(0.96);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s ease;
}


.intro__music-guide.is-visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translate(-50%, -100%)
    translateY(-8px)
    scale(1);
}


.intro__music-guide-icon {
  display:
    flex;

  width:
    21px;

  height:
    21px;

  flex:
    0 0 21px;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    rgba(159, 191, 223, 0.16);

  color:
    var(
      --color-accent-blue,
      #9fbfdf
    );

  font-family:
    "Cormorant Garamond",
    serif;

  font-size:
    15px;

  font-weight:
    500;

  line-height:
    1;
}


.intro__music-guide-text {
  display:
    inline-block;

  position:
    relative;

  top:
    -0.5px;

  color:
    rgba(55, 55, 55, 0.88);

  font-size:
    13px;

  line-height:
    1;

  white-space:
    nowrap;
}


.intro__music-guide::after {
  display:
    none !important;

  content:
    none !important;
}


/* =========================================================
   20. Firework GIF
========================================================= */

.intro__firework-gif {
  position:
    absolute;

  z-index:
    5;

  top:
    50%;

  left:
    50%;

  /*
    GIF 자체가 483px 폭이므로
    모바일에서는 화면보다 살짝 크게 보여줌
  */
  width:
    min(112vw, 500px);

  height:
    auto;

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-drag:
    none;

  /*
    GIF 중앙을 사진 중앙에 맞춤
  */
  transform:
    translate(-50%, -50%);

  /*
    평소에는 숨김
  */
  opacity:
    0;

  visibility:
    hidden;

  /*
    살짝 자연스럽게 등장/퇴장
  */
  transition:
    opacity
    180ms
    ease;

  will-change:
    opacity;
}


/* GIF 재생 중 */

.intro__firework-gif.is-playing {
  opacity:
    1;

  visibility:
    visible;
}


/* =========================================================
   21. Mobile Firework Position
========================================================= */

@media (max-width: 480px) {

  .intro__firework-gif {
    width:
      118vw;

    /*
      GIF 안의 폭죽 중심이 사진 중앙보다
      조금 위에 오도록 배치
    */
    top:
      46%;
  }

}


/* =========================================================
   22. Small Mobile
========================================================= */

@media (max-width: 360px) {

  .intro__firework-gif {
    width:
      122vw;

    top:
      46%;
  }

}


/* =========================================================
   23. Reduced Motion Firework
========================================================= */

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

  .intro__firework-gif {
    display:
      none !important;
  }

}