* { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
      color: white;
      overflow-x: hidden;
      background: #090016;
    }

    .bg {
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(5, 0, 15, 0.25), rgba(5, 0, 15, 0.55)),
        url("background.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: 0;
      pointer-events: none;
    }

    .petals {
      position: fixed;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 3;
    }

    .petal {
      position: absolute;
      top: -12%;
      width: 18px;
      height: 18px;
      background: rgba(255, 196, 220, 0.9);
      border-radius: 15px 0 15px 0;
      transform: rotate(45deg);
      animation: fall linear infinite;
      filter: blur(0.25px);
      pointer-events: none;
    }

    .petal::after {
      content: "";
      position: absolute;
      width: 18px;
      height: 18px;
      background: rgba(255, 160, 200, 0.82);
      border-radius: 15px 0 15px 0;
      left: -8px;
      top: 0;
      pointer-events: none;
    }

    @keyframes fall {
      0% {
        transform: translateY(-15vh) translateX(0) rotate(0deg);
        opacity: 0;
      }
      8% {
        opacity: 1;
      }
      45% {
        transform: translateY(50vh) translateX(-80px) rotate(180deg);
      }
      100% {
        transform: translateY(120vh) translateX(-170px) rotate(360deg);
        opacity: 0;
      }
    }

    section {
      min-height: 100vh;
      padding: 70px 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      z-index: 2;
    }

    .card {
      width: min(920px, 100%);
      padding: 42px 26px;
      border-radius: 30px;
      background: rgba(15, 5, 30, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(14px);
      box-shadow: 0 25px 90px rgba(0, 0, 0, 0.45);
      position: relative;
      z-index: 5;
    }

    h1 {
      font-size: clamp(38px, 7vw, 82px);
      margin: 0 0 18px;
      letter-spacing: -2px;
      line-height: 1.08;
    }

    h2 {
      font-size: clamp(30px, 5vw, 54px);
      margin: 0 0 20px;
    }

    p {
      font-size: clamp(17px, 2.5vw, 23px);
      line-height: 1.75;
      word-break: keep-all;
      font-weight: 500;
    }

    .highlight {
      color: #ffd8f1;
      text-shadow: 0 0 22px rgba(255, 120, 220, 0.9);
    }

    .btn {
      display: inline-block;
      margin-top: 26px;
      padding: 16px 28px;
      border-radius: 999px;
      border: none;
      background: linear-gradient(135deg, #ff74c8, #a96dff);
      color: white;
      font-size: 18px;
      font-weight: 800;
      cursor: pointer;
      text-decoration: none;
      box-shadow: 0 10px 30px rgba(255, 90, 210, 0.35);
      position: relative;
      z-index: 10;
      touch-action: manipulation;
      transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.08);
      box-shadow: 0 14px 38px rgba(255, 90, 210, 0.52);
    }

    .btn.locked {
      opacity: 0.45;
      cursor: not-allowed;
      pointer-events: none;
    }

    .countdown {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 28px;
    }

    .timebox {
      padding: 20px 10px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.15);
    }

    .timebox strong {
      display: block;
      font-size: clamp(28px, 6vw, 58px);
    }

    .timebox span {
      font-size: 15px;
      opacity: 0.85;
    }

    audio, video {
      width: 100%;
      border-radius: 20px;
      margin-top: 20px;
      position: relative;
      z-index: 8;
    }

    video {
      max-height: 520px;
      background: #000;
    }

    .messages {
      display: grid;
      gap: 18px;
      margin-top: 30px;
      text-align: left;
    }
    .message {
      padding: 22px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.14);
      border: 1px solid rgba(255, 255, 255, 0.15);
      opacity: 0;
      transform: translateY(55px);
      transition: opacity 1.1s ease, transform 1.1s ease;
    }

    .message.show {
      opacity: 1;
      transform: translateY(0);
    }


    .message b {
      color: #ffd1ef;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 14px;
      margin-top: 28px;
    }

    .gallery img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,0.2);
      cursor: zoom-in;
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }

    .gallery img:hover {
      transform: scale(1.035);
      border-color: rgba(255, 216, 241, 0.55);
      box-shadow: 0 12px 34px rgba(255, 120, 220, 0.22);
    }

    .photo-modal {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(5, 0, 14, 0.78);
      backdrop-filter: blur(10px);
    }

    .photo-modal.open {
      display: flex;
      animation: modalFade 0.25s ease;
    }

    .photo-modal img {
      max-width: min(92vw, 980px);
      max-height: 86vh;
      object-fit: contain;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,0.28);
      box-shadow: 0 24px 90px rgba(0, 0, 0, 0.62);
    }

    .photo-modal button {
      position: absolute;
      top: 22px;
      right: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.28);
      background: rgba(20, 5, 35, 0.72);
      color: white;
      font-size: 28px;
      cursor: pointer;
    }


    .photo-modal-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      max-width: min(92vw, 980px);
    }

    #photoCaption {
      margin: 0;
      color: rgba(255, 255, 255, 0.94);
      font-size: clamp(16px, 2.4vw, 22px);
      font-weight: 800;
      text-align: center;
      line-height: 1.6;
      word-break: keep-all;
      text-shadow: 0 0 20px rgba(255, 120, 220, 0.55);
    }

    @keyframes modalFade {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .section-note {
      margin-top: 18px;
      font-size: clamp(15px, 2vw, 19px);
      color: rgba(255,255,255,0.82);
      line-height: 1.7;
    }

    .memory-line {
      min-height: 42vh;
      padding: 0 20px;
    }

    .memory-line p {
      font-size: clamp(20px, 3.4vw, 34px);
      font-weight: 700;
      color: rgba(255, 216, 241, 0.92);
      text-shadow: 0 0 24px rgba(255, 120, 220, 0.42);
    }

    .tiny-ending {
      margin-top: 34px;
      font-size: 13px;
      letter-spacing: 0.08em;
      opacity: 0.62;
    }

    .footer-text {
      font-size: clamp(22px, 4vw, 38px);
      font-weight: 800;
      line-height: 1.5;
    }

    .bg-view {
      min-height: 100vh;
      padding: 0;
      background: transparent;
    }

    #page2 {
      display: none;
    }

    #page2.opened {
      display: block;
      animation: fadeIn 1.2s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }


    .music-control {
      position: fixed;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 14px 10px;
      border-radius: 999px;
      background: rgba(20, 5, 35, 0.58);
      border: 1px solid rgba(255, 255, 255, 0.24);
      backdrop-filter: blur(14px);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.36);
    }

    #musicToggle {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: none;
      background: linear-gradient(135deg, #ff74c8, #a96dff);
      color: white;
      font-size: 20px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(255, 90, 210, 0.35);
      touch-action: manipulation;
    }

    .volume-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,0.9);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    #volumeSlider {
      width: 120px;
      accent-color: #ff8fd4;
      transform: rotate(-90deg);
      margin: 48px 0;
      cursor: pointer;
    }


    .day-banner {
      position: fixed;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 118px;
      padding: 16px 12px;
      border-radius: 24px;
      background: rgba(20, 5, 35, 0.58);
      border: 1px solid rgba(255, 255, 255, 0.24);
      backdrop-filter: blur(14px);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.36);
      pointer-events: none;
      text-align: center;
    }

    .day-banner .day-label,
    .day-banner .day-sub {
      font-size: 12px;
      font-weight: 800;
      color: rgba(255,255,255,0.88);
      letter-spacing: -0.02em;
    }

    .day-banner strong {
      font-size: 27px;
      line-height: 1.1;
      color: #ffd8f1;
      text-shadow: 0 0 18px rgba(255, 120, 220, 0.85);
      white-space: nowrap;
    }


    .group-banner {
      position: fixed;
      left: 18px;
      top: calc(50% + 150px);
      transform: translateY(-50%);
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 118px;
      padding: 16px 12px;
      border-radius: 24px;
      background: rgba(20, 5, 35, 0.58);
      border: 1px solid rgba(255, 255, 255, 0.24);
      backdrop-filter: blur(14px);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.36);
      pointer-events: none;
      text-align: center;
    }

    .group-banner strong {
      font-size: 27px;
      line-height: 1.1;
      color: #ffd8f1;
      text-shadow: 0 0 18px rgba(255, 120, 220, 0.85);
      white-space: nowrap;
    }




    /* 인트로 동안 스크롤 잠금 */
    body.intro-locked {
      overflow: hidden;
      height: 100vh;
      touch-action: none;
    }

    /* 인트로 후 화면이 흐림 → 선명하게 */
    .site-wrap {
      filter: blur(12px);
      transform: scale(1.025);
      transition: filter 1.8s ease, transform 1.8s ease;
      will-change: filter, transform;
    }

    body.intro-done .site-wrap {
      filter: blur(0);
      transform: scale(1);
    }

    /* 첫 화면 자동 카메라 연출 */
    #page1 .card {
      opacity: 0;
      transform: translateY(34px) scale(1.025);
      transition: opacity 1.6s ease, transform 2.4s ease;
    }

    body.intro-done #page1 .card {
      opacity: 1;
      transform: translateY(0) scale(1);
    }


    /* 첫 입장 로딩 연출 */
    .intro-loader {
      position: fixed;
      inset: 0;
      z-index: 3000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at 50% 45%, rgba(80, 25, 95, 0.34), rgba(5, 0, 14, 0.96) 62%);
      transition: opacity 1.35s ease, visibility 1.35s ease, backdrop-filter 1.35s ease;
      backdrop-filter: blur(10px);
    }

    .intro-loader.hide {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .intro-loader p {
      margin: 0;
      font-size: clamp(21px, 4vw, 42px);
      font-weight: 800;
      color: #ffd8f1;
      text-shadow: 0 0 28px rgba(255, 120, 220, 0.7);
      letter-spacing: -0.04em;
      animation: introFloat 2.2s ease-in-out infinite alternate;
    }

    @keyframes introFloat {
      from { transform: translateY(8px); opacity: 0.72; }
      to { transform: translateY(-4px); opacity: 1; }
    }

    /* 마우스 따라오는 은은한 빛 */
    .cursor-glow {
      position: fixed;
      left: 0;
      top: 0;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 135, 215, 0.16), rgba(255, 135, 215, 0.06) 38%, transparent 70%);
      transform: translate(-50%, -50%);
      z-index: 1;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.35s ease;
      mix-blend-mode: screen;
    }

    /* 우측 스크롤 진행도 */
    

    /* 첫 제목 타이핑 준비 */
    .type-ready {
      display: inline-block;
      min-height: 1.08em;
      border-right: 3px solid rgba(255, 216, 241, 0.9);
      animation: caretBlink 0.85s step-end infinite;
      white-space: nowrap;
    }

    .type-ready.done {
      border-right-color: transparent;
      animation: none;
    }

    @keyframes caretBlink {
      50% { border-right-color: transparent; }
    }

    /* 폴라로이드 느낌 갤러리 - 밤 배경에 맞춘 자연스러운 톤 */
    .gallery img {
      padding: 10px 10px 34px;
      background:
        linear-gradient(
          180deg,
          rgba(255, 235, 248, 0.58),
          rgba(190, 145, 210, 0.30)
        );
      border: 1px solid rgba(255, 216, 241, 0.28);
      box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(255, 120, 220, 0.08);
    }

    .gallery img:nth-child(1) { transform: rotate(-2.2deg); }
    .gallery img:nth-child(2) { transform: rotate(1.6deg); }
    .gallery img:nth-child(3) { transform: rotate(-1.1deg); }
    .gallery img:nth-child(4) { transform: rotate(2.4deg); }

    .gallery img:hover {
      transform: scale(1.025) rotate(0deg);
      border-color: rgba(255, 216, 241, 0.42);
      box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(255, 120, 220, 0.14);
    }

    .message.show {
      box-shadow: 0 0 30px rgba(255, 180, 220, 0.12);
    }

    #background-view::after {
      content: "그리고 오늘도, 네 행복을 바라고 있어";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: rgba(255, 216, 241, 0.9);
      font-size: clamp(24px, 4vw, 46px);
      font-weight: 800;
      opacity: 0;
      text-shadow: 0 0 28px rgba(255, 120, 220, 0.55);
      transition: opacity 1.4s ease, transform 1.4s ease;
    }

    #background-view.end-show::after {
      opacity: 1;
      transform: translate(-50%, -58%);
    }

    body.bg-zoom .bg {
      animation: backgroundSlowZoom 22s linear forwards;
    }

    @keyframes backgroundSlowZoom {
      from { transform: scale(1); }
      to { transform: scale(1.055); }
    }

    @media (max-width: 640px) {
      .day-banner {
        left: 10px;
        top: auto;
        bottom: 86px;
        transform: none;
        min-width: 102px;
        padding: 12px 10px;
        border-radius: 20px;
      }

      .day-banner strong {
        font-size: 22px;
      }

      .group-banner {
        left: 10px;
        top: auto;
        bottom: 10px;
        transform: none;
        min-width: 102px;
        padding: 12px 10px;
        border-radius: 20px;
      }

      .group-banner strong {
        font-size: 22px;
      }

      .day-banner .day-label,
      .day-banner .day-sub {
        font-size: 11px;
      }


      .music-control {
        right: 10px;
        top: auto;
        bottom: 18px;
        transform: none;
        flex-direction: row;
        border-radius: 999px;
        padding: 10px 12px;
      }

      #musicToggle {
        width: 42px;
        height: 42px;
        font-size: 18px;
      }

      .volume-wrap {
        flex-direction: row;
        gap: 6px;
      }

      #volumeSlider {
        width: 90px;
        transform: none;
        margin: 0;
      }


      .bg {
        background-position: center top;
      }

      .countdown {
        grid-template-columns: repeat(2, 1fr);
      }

      section {
        padding: 48px 14px;
      }

      .card {
        padding: 32px 18px;
        background: rgba(15, 5, 30, 0.56);
        backdrop-filter: blur(10px);
        box-shadow: 0 16px 52px rgba(0, 0, 0, 0.36);
      }

      .petal {
        filter: blur(0.35px);
      }

      .cursor-glow {
        display: none;
      }

      .gallery {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  
    /* 플로팅 배너/컨트롤은 화면 기준으로 계속 고정 */
    .music-control,
    .day-banner,
    .group-banner,
    .scroll-progress,
    .cursor-glow,
    .petals,
    .photo-modal {
      transform-style: flat;
    }


    /* 밤하늘 별빛 */
    .stars {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }

    .star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: rgba(255,255,255,0.95);
      border-radius: 50%;
      animation: twinkle ease-in-out infinite;
      box-shadow: 0 0 10px rgba(255,255,255,0.7);
    }

    @keyframes twinkle {
      0%, 100% {
        opacity: 0.18;
        transform: scale(0.8);
      }
      50% {
        opacity: 1;
        transform: scale(1.4);
      }
    }

    /* 롤링페이퍼 hover */
    .message {
      transition:
        opacity 1.1s ease,
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease,
        background 0.45s ease;
    }

    .message:hover {
      transform: translateY(-6px);
      border-color: rgba(255, 216, 241, 0.38);
      background: rgba(255,255,255,0.17);
      box-shadow:
        0 0 28px rgba(255, 180, 220, 0.16),
        0 16px 38px rgba(0,0,0,0.22);
    }


    /* 스크롤에 따라 벚꽃이 더 부드럽게 흩날리는 느낌 */
    .petal {
      transition: opacity 0.7s ease, filter 0.7s ease;
    }

    body.petal-soft .petal {
      filter: blur(0.45px);
    }

    body.petal-deep .petal {
      filter: blur(0.7px);
      opacity: 0.78 !important;
    }

    /* 롤링페이퍼 카드 순차 등장 딜레이 */
    #rollingPaperMessages .message {
      transition-delay: var(--delay, 0s);
    }

    /* 버튼 클릭 ripple */
    .btn {
      overflow: hidden;
      isolation: isolate;
    }

    .btn .ripple {
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.45);
      transform: translate(-50%, -50%) scale(0);
      animation: ripplePop 0.7s ease-out forwards;
      pointer-events: none;
      z-index: -1;
      box-shadow: 0 0 24px rgba(255, 216, 241, 0.65);
    }

    @keyframes ripplePop {
      to {
        transform: translate(-50%, -50%) scale(18);
        opacity: 0;
      }
    }

    /* 별똥별 */
    .shooting-star {
      position: fixed;
      top: 0;
      left: 0;
      width: 130px;
      height: 2px;
      pointer-events: none;
      z-index: 2;
      opacity: 0;
      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(255,210,240,0));
      filter: drop-shadow(0 0 10px rgba(255, 216, 241, 0.75));
      transform: rotate(-18deg);
      animation: shootingStarMove 2.3s ease-out forwards;
    }

    @keyframes shootingStarMove {
      0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(-18deg);
      }
      12% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translate3d(-520px, 210px, 0) rotate(-18deg);
      }
    }


    /* 롤링페이퍼: 빛 입자가 양쪽 위에서 중앙으로 날아온 뒤, 좌우로 퍼지며 카드 생성 */
    #paper .card {
      overflow: hidden;
    }

    .paper-light-stage {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      overflow: hidden;
    }

    .paper-orb {
      position: absolute;
      left: 50%;
      top: var(--orb-y, 260px);
      width: 14px;
      height: 14px;
      border-radius: 50%;
      opacity: 0;
      background: rgba(255, 232, 250, 0.98);
      box-shadow:
        0 0 18px rgba(255, 216, 241, 0.95),
        0 0 42px rgba(255, 120, 210, 0.62);
      transform: translate(-50%, -50%) scale(0.75);
    }

    .paper-orb.active {
      animation: orbPulse 0.9s ease forwards;
    }

    @keyframes orbPulse {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
      30% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
      100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.9); }
    }

    .fly-light {
      position: absolute;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      background: rgba(255, 235, 250, 0.96);
      box-shadow:
        0 0 14px rgba(255, 225, 246, 0.96),
        0 0 34px rgba(255, 120, 210, 0.58);
      filter: blur(0.2px);
    }

    .fly-light.fly-in-left {
      animation: flyInLeft 0.9s ease forwards;
    }

    .fly-light.fly-in-right {
      animation: flyInRight 0.9s ease forwards;
    }

    @keyframes flyInLeft {
      0% {
        opacity: 0;
        transform: translate(-360px, -190px) scale(0.45);
      }
      25% { opacity: 1; }
      100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
    }

    @keyframes flyInRight {
      0% {
        opacity: 0;
        transform: translate(360px, -190px) scale(0.45);
      }
      25% { opacity: 1; }
      100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
    }

    .split-dot {
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      background: rgba(255, 230, 248, 0.95);
      box-shadow:
        0 0 16px rgba(255, 216, 241, 0.9),
        0 0 30px rgba(255, 120, 210, 0.45);
    }

    .split-dot.go-left {
      animation: splitLeft 0.7s ease-out forwards;
    }

    .split-dot.go-right {
      animation: splitRight 0.7s ease-out forwards;
    }

    @keyframes splitLeft {
      0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-360px, 0) scale(0.65);
      }
    }

    @keyframes splitRight {
      0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(360px, 0) scale(0.65);
      }
    }

    .message {
      position: relative;
      overflow: hidden;
      transform-origin: center;
    }

    .message::before {
      content: "";
      position: absolute;
      inset: -20%;
      opacity: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 232, 250, 0.36), rgba(255, 125, 210, 0.18) 38%, transparent 70%);
      transform: scale(0.7);
    }

    .message.light-created {
      animation: cardBornFromLight 0.95s ease both;
      border-color: rgba(255, 216, 241, 0.46);
      box-shadow:
        0 0 34px rgba(255, 180, 220, 0.22),
        0 18px 44px rgba(0, 0, 0, 0.26);
    }

    .message.light-created::before {
      animation: cardInnerGlow 1.15s ease forwards;
    }

    @keyframes cardBornFromLight {
      0% {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
        filter: blur(8px);
      }
      45% {
        opacity: 1;
        transform: translateY(-3px) scale(1.01);
        filter: blur(1px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes cardInnerGlow {
      0% { opacity: 0; transform: scale(0.72); }
      35% { opacity: 1; }
      100% { opacity: 0; transform: scale(1.16); }
    }

    .card-birth-flash {
      position: absolute;
      width: min(680px, 86%);
      height: 90px;
      border-radius: 999px;
      z-index: 4;
      pointer-events: none;
      background:
        radial-gradient(ellipse at center, rgba(255, 232, 250, 0.32), rgba(255, 125, 210, 0.14) 42%, transparent 72%);
      filter: blur(13px);
      animation: cardBirthFlash 0.95s ease forwards;
    }

    @keyframes cardBirthFlash {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0.18);
      }
      36% { opacity: 1; }
      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(1.04);
      }
    }


    /* 맨 아래 도달 후 시작되는 엔딩 시퀀스 */
    #background-view::after {
      content: none !important;
      display: none !important;
    }

    #background-view {
      position: relative;
      overflow: hidden;
    }

    .ending-sequence {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 8;
      transform: translate(-50%, -50%);
      width: min(92vw, 980px);
      text-align: center;
      pointer-events: none;
    }

    .ending-sequence-text {
      margin: 0;
      color: rgba(255, 216, 241, 0.95);
      font-size: clamp(28px, 4.8vw, 58px);
      font-weight: 900;
      line-height: 1.45;
      letter-spacing: -0.04em;
      word-break: keep-all;
      text-shadow:
        0 0 24px rgba(255, 120, 220, 0.72),
        0 0 58px rgba(185, 115, 255, 0.42);
      opacity: 0;
      transform: translateY(18px) scale(0.985);
      transition: opacity 0.85s ease, transform 0.85s ease;
    }

    .ending-sequence-text.show {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .ending-count {
      display: inline-block;
      min-width: 1.3em;
      font-size: clamp(58px, 10vw, 120px);
      color: #ffffff;
      text-shadow:
        0 0 28px rgba(255, 216, 241, 0.95),
        0 0 72px rgba(255, 120, 220, 0.74);
      animation: endingCountPop 0.78s ease both;
    }

    @keyframes endingCountPop {
      0% {
        opacity: 0;
        transform: scale(0.62);
        filter: blur(8px);
      }
      42% {
        opacity: 1;
        transform: scale(1.14);
        filter: blur(0);
      }
      100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
      }
    }

    .birthday-final {
      animation: birthdayFinalGlow 2.1s ease-in-out infinite alternate;
    }

    @keyframes birthdayFinalGlow {
      from {
        text-shadow:
          0 0 24px rgba(255, 120, 220, 0.72),
          0 0 58px rgba(185, 115, 255, 0.42);
      }
      to {
        text-shadow:
          0 0 36px rgba(255, 216, 241, 0.98),
          0 0 88px rgba(255, 120, 220, 0.78),
          0 0 124px rgba(185, 115, 255, 0.48);
      }
    }


    /* 더 깊은 패럴랙스 */
    body.parallax-active .bg {
      transform: translate3d(0, var(--bg-parallax, 0px), 0) scale(var(--bg-scale, 1.03));
      transition: transform 0.15s linear;
    }

    body.parallax-active .stars {
      transform: translate3d(0, var(--star-parallax, 0px), 0);
      transition: transform 0.15s linear;
    }

    body.parallax-active .petals {
      transform: translate3d(0, var(--petal-parallax, 0px), 0);
      transition: transform 0.15s linear;
    }

    /* 롤링페이퍼 카드 미세 반짝임 */
    .message::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.02) 35%,
        rgba(255, 216, 241, 0.22) 48%,
        rgba(255, 255, 255, 0.06) 55%,
        transparent 70%
      );
      transform: translateX(-130%);
    }

    .message.show::after {
      animation: messageShimmer 7.5s ease-in-out infinite;
      animation-delay: var(--shimmer-delay, 0s);
    }

    @keyframes messageShimmer {
      0%, 76% {
        opacity: 0;
        transform: translateX(-130%);
      }
      82% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translateX(130%);
      }
    }

    /* 마지막 생일축하 연출 중 벚꽃 멈춤 */
    body.petal-freeze .petal {
      animation-play-state: paused !important;
      opacity: 0.72 !important;
      transition: opacity 2s ease, filter 2s ease;
      filter: blur(0.75px);
    }

    /* 엔딩 카운트다운 전체화면 오버레이 */
    body.ending-lock {
      overflow: hidden;
      height: 100vh;
      touch-action: none;
    }

    .birthday-overlay {
      position: fixed;
      inset: 0;
      z-index: 8000;
      display: none;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      overflow: hidden;
      background: rgba(5, 0, 14, 0);
      transition: background 1.2s ease, backdrop-filter 1.2s ease;
    }

    .birthday-overlay.show {
      display: flex;
      background: rgba(5, 0, 14, 0.56);
      backdrop-filter: blur(9px);
    }

    .birthday-overlay.dark {
      background: rgba(0, 0, 0, 0.96);
      backdrop-filter: blur(16px);
    }

    .birthday-overlay-text {
      position: relative;
      z-index: 20;
      width: min(92vw, 1100px);
      text-align: center;
      color: rgba(255, 230, 248, 0.98);
      font-size: clamp(34px, 6.4vw, 86px);
      font-weight: 950;
      line-height: 1.28;
      letter-spacing: -0.06em;
      word-break: keep-all;
      opacity: 0;
      transform: scale(0.92) translateY(18px);
      transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
      text-shadow:
        0 0 24px rgba(255, 120, 220, 0.95),
        0 0 70px rgba(185, 115, 255, 0.58),
        0 0 120px rgba(255, 216, 241, 0.32);
    }

    .birthday-overlay-text.show {
      opacity: 1;
      transform: scale(1) translateY(0);
      filter: blur(0);
    }

    .birthday-overlay-text.counting {
      font-size: clamp(82px, 16vw, 190px);
      color: #fff;
      letter-spacing: -0.04em;
    }

    .birthday-overlay-text.final {
      font-size: clamp(42px, 7vw, 104px);
      animation: finalBirthdayBreath 2.2s ease-in-out infinite alternate;
    }

    @keyframes finalBirthdayBreath {
      from {
        transform: scale(1);
        text-shadow:
          0 0 28px rgba(255, 120, 220, 0.9),
          0 0 78px rgba(185, 115, 255, 0.5);
      }
      to {
        transform: scale(1.025);
        text-shadow:
          0 0 38px rgba(255, 238, 250, 1),
          0 0 100px rgba(255, 120, 220, 0.82),
          0 0 150px rgba(185, 115, 255, 0.6);
      }
    }

    .firework-particle {
      position: fixed;
      left: 50%;
      top: 50%;
      width: 5px;
      height: 5px;
      z-index: 8010;
      border-radius: 999px;
      pointer-events: none;
      background: rgba(255, 238, 250, 0.98);
      box-shadow:
        0 0 12px rgba(255, 238, 250, 0.98),
        0 0 28px rgba(255, 120, 220, 0.8);
      animation: fireworkParticle 1.25s ease-out forwards;
    }

    @keyframes fireworkParticle {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.8);
      }
      100% {
        opacity: 0;
        transform:
          translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
          scale(0.25);
      }
    }

    .final-shooting-star {
      position: fixed;
      width: 220px;
      height: 3px;
      z-index: 8012;
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.98), rgba(255,125,210,0.75), transparent);
      filter:
        drop-shadow(0 0 14px rgba(255,216,241,0.92))
        drop-shadow(0 0 32px rgba(255,120,220,0.62));
      animation: finalStarMove 2.2s ease-out forwards;
    }

    @keyframes finalStarMove {
      0% {
        opacity: 0;
        left: 105vw;
        top: 12vh;
        transform: rotate(-22deg) scaleX(0.6);
      }
      15% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        left: -22vw;
        top: 52vh;
        transform: rotate(-22deg) scaleX(1.15);
      }
    }

    .screen-dark-fade {
      position: fixed;
      inset: 0;
      z-index: 7990;
      pointer-events: none;
      background: rgba(0,0,0,0);
      transition: background 5s ease;
    }

    .screen-dark-fade.show {
      background: rgba(0,0,0,0.62);
    }


    /* 제작자 코멘터리 작은 폭죽 + 코멘트 */
    .creator-comment {
      position: fixed;
      z-index: 8025;
      max-width: min(260px, 38vw);
      padding: 12px 16px;
      border-radius: 18px;
      background: rgba(20, 5, 35, 0.48);
      border: 1px solid rgba(255, 216, 241, 0.26);
      backdrop-filter: blur(10px);
      color: rgba(255, 238, 250, 0.96);
      font-size: clamp(12px, 1.7vw, 17px);
      font-weight: 800;
      line-height: 1.55;
      text-align: center;
      word-break: keep-all;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.86);
      text-shadow: 0 0 16px rgba(255, 120, 220, 0.62);
      box-shadow:
        0 0 24px rgba(255, 120, 220, 0.18),
        0 14px 38px rgba(0, 0, 0, 0.32);
      animation: creatorCommentIn 1.1s ease forwards;
    }

    @keyframes creatorCommentIn {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.82);
        filter: blur(8px);
      }
      55% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.04);
        filter: blur(0);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
      }
    }

    .mini-firework-particle {
      position: fixed;
      z-index: 8024;
      width: 4px;
      height: 4px;
      border-radius: 999px;
      pointer-events: none;
      background: rgba(255, 238, 250, 0.98);
      box-shadow:
        0 0 10px rgba(255, 238, 250, 0.96),
        0 0 22px rgba(255, 120, 220, 0.74);
      animation: miniFirework 1.05s ease-out forwards;
    }

    @keyframes miniFirework {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.7);
      }
      100% {
        opacity: 0;
        transform:
          translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
          scale(0.22);
      }
    }

    @media (max-width: 640px) {
      .creator-comment {
        max-width: 42vw;
        padding: 9px 10px;
        border-radius: 14px;
        font-size: 11px;
      }
    }


    /* 엔딩 일반 문구 깜빡임/확대 오류 방지 */
    .birthday-overlay-text {
      transform: translateY(14px) !important;
    }

    .birthday-overlay-text.show {
      transform: translateY(0) !important;
    }

    .birthday-overlay-text.counting {
      transform: scale(1) translateY(0) !important;
    }

    .birthday-overlay-text.final {
      transform: scale(1) translateY(0) !important;
    }

    .birthday-overlay-text.final.show {
      transform: scale(1) translateY(0) !important;
    }


    /* 인트로 멈춤 방지 최종 안전 처리 */
    body.intro-locked {
      overflow: hidden !important;
      height: 100vh !important;
      touch-action: none !important;
    }

    #introTypingText {
      min-height: 1.4em;
      white-space: nowrap;
    }

    #introTypingText::after {
      content: "";
      display: inline-block;
      width: 3px;
      height: 1em;
      margin-left: 7px;
      background: rgba(255,216,241,0.92);
      vertical-align: -0.12em;
      animation: introCaretBlink 0.8s step-end infinite;
    }

    #introTypingText.done::after {
      display: none;
    }

    @keyframes introCaretBlink {
      50% { opacity: 0; }
    }

    body.intro-done .site-wrap {
      filter: blur(0) !important;
      transform: scale(1) !important;
    }


    /* 감정 숨 고르기 구간 */
    .pause-section {
      min-height: 110vh;
      position: relative;
      overflow: hidden;
    }

    .pause-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at center,
        rgba(255,216,241,0.12),
        transparent 38%),
        rgba(0,0,0,0.22);

      opacity: 0;
      transition: opacity 1.8s ease;
      pointer-events: none;
    }

    .pause-section.active::before {
      opacity: 1;
    }

    .pause-inner {
      width: min(900px, 100%);
      margin: 0 auto;
    }

    .pause-small {
      margin-bottom: 26px;
      color: rgba(255,255,255,0.58);
      font-size: clamp(14px,2vw,18px);
      font-weight: 800;
      letter-spacing: 0.16em;

      opacity: 0;
      transform: translateY(18px);

      transition:
        opacity 1.4s ease,
        transform 1.4s ease;
    }

    .pause-line {
      margin: 0;
      font-size: clamp(28px,5vw,58px);
      line-height: 1.45;
      font-weight: 900;
      letter-spacing: -0.06em;

      color: rgba(255,232,248,0.96);

      text-shadow:
        0 0 28px rgba(255,120,220,0.62),
        0 0 68px rgba(185,115,255,0.28);

      opacity: 0;
      transform: translateY(28px);
      filter: blur(8px);

      transition:
        opacity 2s ease,
        transform 2s cubic-bezier(0.22,1,0.36,1),
        filter 2s ease;
    }

    .pause-line.second {
      margin-top: 34px;
      transition-delay: 1.2s;
    }

    .pause-after {
      margin-top: 54px;

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

      font-size: clamp(15px,2vw,19px);
      line-height: 1.8;

      opacity: 0;
      transform: translateY(14px);

      transition:
        opacity 1.5s ease 2.6s,
        transform 1.5s ease 2.6s;
    }

    .pause-section.active .pause-small,
    .pause-section.active .pause-line,
    .pause-section.active .pause-after {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }

    body.pause-mode .petal {
      animation-duration: 13s !important;
      opacity: 0.68;
      filter: blur(0.7px);
    }

    body.pause-mode .bg {
      filter: brightness(0.72) saturate(0.94);
      transition: filter 1.8s ease;
    }




    /* 갤러리 전 감정 전환 구간 */
    .gallery-memory {
      min-height: 58vh;
      position: relative;
      overflow: hidden;
    }

    .gallery-memory::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(720px, 90vw);
      height: min(720px, 90vw);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(255, 216, 241, 0.12), transparent 62%);
      opacity: 0;
      filter: blur(4px);
      transition: opacity 1.8s ease;
      pointer-events: none;
    }

    .gallery-memory.active::before {
      opacity: 1;
    }

    .memory-inner {
      position: relative;
      z-index: 2;
    }

    .memory-mini {
      margin: 0 0 18px;
      color: rgba(255,255,255,0.5);
      font-size: 15px !important;
      letter-spacing: 0.16em;
      font-weight: 800;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 1.2s ease, transform 1.2s ease;
    }

    .memory-main {
      margin: 0;
      font-size: clamp(30px,5vw,58px) !important;
      line-height: 1.5 !important;
      font-weight: 900 !important;
      color: rgba(255,232,248,0.95) !important;
      text-shadow: 0 0 24px rgba(255,120,220,0.42) !important;
      letter-spacing: -0.05em;
      opacity: 0;
      transform: translateY(24px);
      filter: blur(7px);
      transition:
        opacity 1.8s ease,
        transform 1.8s cubic-bezier(0.22,1,0.36,1),
        filter 1.8s ease;
    }

    .memory-sub {
      margin: 30px 0 0;
      color: rgba(255,255,255,0.64) !important;
      font-size: clamp(15px,2vw,20px) !important;
      line-height: 1.9 !important;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 1.5s ease 1.25s, transform 1.5s ease 1.25s;
    }

    .gallery-memory.active .memory-mini,
    .gallery-memory.active .memory-main,
    .gallery-memory.active .memory-sub {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }

    /* 벚꽃 농도 완화 */
    .petal {
      background: rgba(255, 196, 220, 0.46) !important;
      filter: blur(0.72px) !important;
    }

    .petal::after {
      background: rgba(255, 160, 200, 0.32) !important;
    }

    body.petal-soft .petal,
    body.petal-deep .petal,
    body.pause-mode .petal,
    body.petal-freeze .petal {
      opacity: 0.56 !important;
      filter: blur(0.82px) !important;
    }

    /* 배경 감상 구간에서 배경이 확대/축소되는 느낌 제거 */
    body.bg-zoom .bg {
      animation: none !important;
    }

    body.parallax-active .bg {
      transform: translate3d(0, var(--bg-parallax, 0px), 0) scale(1.03) !important;
    }

    /* 6시 방향에서 올라오는 큰 생일 폭죽 */
    .final-firework-rocket {
      position: fixed;
      left: 50%;
      bottom: -34px;
      z-index: 8014;
      width: 7px;
      height: 86px;
      border-radius: 999px;
      pointer-events: none;
      background: linear-gradient(to top, transparent, rgba(255,255,255,0.98), rgba(255,142,215,0.92));
      box-shadow:
        0 0 18px rgba(255,216,241,0.92),
        0 0 46px rgba(255,120,220,0.72);
      transform: translateX(-50%);
      animation: finalRocketRise 1.28s cubic-bezier(0.18, 0.84, 0.32, 1) forwards;
    }

    @keyframes finalRocketRise {
      0% {
        opacity: 0;
        bottom: -44px;
        transform: translateX(-50%) scaleY(0.72);
      }
      14% { opacity: 1; }
      82% { opacity: 1; }
      100% {
        opacity: 0;
        bottom: 50vh;
        transform: translateX(-50%) scaleY(0.42);
      }
    }

    .grand-firework-particle {
      position: fixed;
      left: 50%;
      top: 50%;
      width: 7px;
      height: 7px;
      z-index: 8015;
      border-radius: 999px;
      pointer-events: none;
      background: rgba(255, 238, 250, 0.99);
      box-shadow:
        0 0 16px rgba(255, 238, 250, 1),
        0 0 38px rgba(255, 120, 220, 0.9),
        0 0 70px rgba(185, 115, 255, 0.55);
      animation: grandFireworkParticle 1.85s ease-out forwards;
    }

    @keyframes grandFireworkParticle {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.85);
      }
      72% { opacity: 0.88; }
      100% {
        opacity: 0;
        transform:
          translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
          scale(0.18);
      }
    }

    

    



    /* 최종 다듬기: 감정 구간은 갤러리 전환 구간처럼 깔끔하게, 화면 흐림 제거 */
    .pause-memory {
      min-height: 64vh !important;
      position: relative;
      overflow: hidden;
    }

    .pause-memory::before {
      content: "" !important;
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(720px, 90vw);
      height: min(720px, 90vw);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(255, 216, 241, 0.10), transparent 62%);
      opacity: 0;
      filter: blur(3px);
      transition: opacity 1.8s ease;
      pointer-events: none;
    }

    .pause-memory.active::before {
      opacity: 1;
    }

    body.pause-mode .bg {
      filter: none !important;
    }

    body.pause-mode .petal {
      opacity: 0.5 !important;
      filter: blur(0.85px) !important;
    }

    /* 벚꽃 더 연하게 */
    .petal {
      width: 13px !important;
      height: 13px !important;
      background: rgba(255, 196, 220, 0.38) !important;
      filter: blur(0.9px) !important;
    }

    .petal::after {
      width: 13px !important;
      height: 13px !important;
      left: -6px !important;
      background: rgba(255, 160, 200, 0.24) !important;
    }

    /* 폴라로이드 흰색 테두리를 밤 배경에 맞게 자연스럽게 */
    .gallery img {
      background: rgba(255, 242, 236, 0.74) !important;
      border: 1px solid rgba(255, 224, 238, 0.42) !important;
      box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.24),
        0 0 22px rgba(255, 160, 210, 0.08) !important;
    }

    .gallery img:hover {
      transform: scale(1.022) rotate(0deg) !important;
      border-color: rgba(255, 216, 241, 0.45) !important;
      box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.28),
        0 0 26px rgba(255, 140, 220, 0.14) !important;
    }

    /* 큰 폭죽 발사 궤적 제거: 선 대신 작은 빛 점만 올라오게 */
    .final-firework-rocket {
      width: 14px !important;
      height: 14px !important;
      bottom: 0 !important;
      border-radius: 50% !important;
      background: radial-gradient(circle, rgba(255,255,255,1), rgba(255,216,241,0.92) 44%, rgba(255,120,220,0.0) 72%) !important;
      box-shadow:
        0 0 18px rgba(255,216,241,0.92),
        0 0 34px rgba(255,120,220,0.42) !important;
      opacity: 0;
      animation: finalRocketDotRise 1.32s cubic-bezier(0.18, 0.84, 0.32, 1) forwards !important;
    }

    @keyframes finalRocketDotRise {
      0% {
        opacity: 0;
        transform: translate(-50%, 16px) scale(0.55);
        bottom: -18px;
      }
      18% {
        opacity: 0.92;
      }
      82% {
        opacity: 0.9;
      }
      100% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.35);
        bottom: 50vh;
      }
    }


  
    /* 갤러리 폴라로이드 최종 톤 보정 */
    #gallery .gallery img {
      background:
        linear-gradient(
          180deg,
          rgba(255, 232, 247, 0.56),
          rgba(178, 130, 205, 0.30)
        ) !important;
      border-color: rgba(255, 216, 241, 0.28) !important;
      box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(255, 120, 220, 0.08) !important;
    }

    #gallery .gallery img:hover {
      transform: scale(1.025) rotate(0deg) !important;
      border-color: rgba(255, 216, 241, 0.42) !important;
      box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(255, 120, 220, 0.14) !important;
    }

  
    /* 중앙 큰 폭죽: 0이 사라진 뒤 조용히 올라와 터지도록 조정 */
    .big-firework-rocket {
      position: fixed;
      left: 50%;
      bottom: -8vh;
      width: 8px;
      height: 8px;
      z-index: 8014;
      border-radius: 999px;
      pointer-events: none;
      opacity: 0;
      background: rgba(255, 238, 250, 0.98);
      box-shadow:
        0 0 18px rgba(255, 238, 250, 0.95),
        0 0 42px rgba(255, 120, 220, 0.62);
      animation: bigRocketUp 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes bigRocketUp {
      0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.7);
      }
      18% {
        opacity: 1;
      }
      86% {
        opacity: 1;
        transform: translate(-50%, -50vh) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, -53vh) scale(0.7);
      }
    }

    .big-firework-particle {
      position: fixed;
      left: 50%;
      top: 47%;
      width: 7px;
      height: 7px;
      z-index: 8015;
      border-radius: 999px;
      pointer-events: none;
      background: rgba(255, 238, 250, 0.98);
      box-shadow:
        0 0 16px rgba(255, 238, 250, 1),
        0 0 38px rgba(255, 120, 220, 0.84),
        0 0 68px rgba(185, 115, 255, 0.56);
      animation: bigFireworkParticle 1.55s ease-out forwards;
    }

    @keyframes bigFireworkParticle {
      0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.9);
      }
      100% {
        opacity: 0;
        transform:
          translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
          scale(0.18);
      }
    }

  
    /* 스크롤은 가능하게, 오른쪽 기본 스크롤바만 숨김 */
    html,
    body {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

  
    /* 갤러리 사진 아래 캡션 */
    .gallery-item {
      margin: 0;
      padding: 10px 10px 16px;
      border-radius: 22px;
      background:
        linear-gradient(
          180deg,
          rgba(255, 232, 247, 0.52),
          rgba(178, 130, 205, 0.28)
        );
      border: 1px solid rgba(255, 216, 241, 0.26);
      box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(255, 120, 220, 0.08);
      transform-origin: center;
      transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
    }

    .gallery-item:nth-child(1) { transform: rotate(-2.2deg); }
    .gallery-item:nth-child(2) { transform: rotate(1.6deg); }
    .gallery-item:nth-child(3) { transform: rotate(-1.1deg); }
    .gallery-item:nth-child(4) { transform: rotate(2.4deg); }

    .gallery-item:hover {
      transform: scale(1.025) rotate(0deg);
      border-color: rgba(255, 216, 241, 0.42);
      box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(255, 120, 220, 0.14);
    }

    .gallery-item img {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      padding: 0 !important;
      background: transparent !important;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.16) !important;
      box-shadow: none !important;
      transform: none !important;
    }

    .gallery-item figcaption {
      min-height: 3.2em;
      margin-top: 12px;
      padding: 0 4px;
      color: rgba(255, 244, 252, 0.88);
      font-size: clamp(13px, 1.8vw, 16px);
      font-weight: 800;
      line-height: 1.55;
      text-align: center;
      word-break: keep-all;
      text-shadow: 0 0 14px rgba(255, 120, 220, 0.32);
    }

    #gallery .gallery img:hover {
      transform: none !important;
    }

  
    /* 감성형 스크롤 진행바 */
    .scroll-progress {
      position: fixed;
      right: 10px;
      top: 0;
      z-index: 9999;

      width: 4px;
      height: 0%;

      border-radius: 999px;

      background:
        linear-gradient(
          to bottom,
          rgba(255,255,255,0.10),
          rgba(255,205,238,0.86),
          rgba(185,115,255,0.72),
          rgba(255,255,255,0.12)
        );

      background-size: 100% 220%;

      opacity: 0.78;

      box-shadow:
        0 0 12px rgba(255,120,220,0.36),
        0 0 26px rgba(185,115,255,0.18);

      animation: auroraFlow 7s linear infinite;
      transition:
        height 0.12s linear,
        filter 0.5s ease,
        opacity 0.5s ease;
    }

    .scroll-progress::before {
      content: "";

      position: absolute;
      inset: 0;

      border-radius: inherit;

      background:
        linear-gradient(
          to bottom,
          rgba(255,255,255,0.22),
          rgba(255,255,255,0)
        );

      opacity: 0.45;
      pointer-events: none;
    }

    .scroll-progress::after {
      content: "";

      position: absolute;
      left: 50%;
      bottom: -9px;

      width: 13px;
      height: 13px;

      border-radius: 50%;

      background:
        radial-gradient(
          circle,
          rgba(255,255,255,0.98) 0%,
          rgba(255,225,245,0.92) 38%,
          rgba(255,120,220,0.38) 72%,
          rgba(255,120,220,0) 100%
        );

      transform: translateX(-50%);

      box-shadow:
        0 0 14px rgba(255,235,248,0.95),
        0 0 34px rgba(255,120,220,0.48),
        0 0 62px rgba(185,115,255,0.24);

      animation: starPulse 2.8s ease-in-out infinite;
    }

    body.near-end .scroll-progress {
      filter: brightness(1.18);
      opacity: 0.95;
    }

    @keyframes auroraFlow {
      from {
        background-position: 0% 0%;
      }

      to {
        background-position: 0% 100%;
      }
    }

    @keyframes starPulse {
      0%,100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.92;
      }

      50% {
        transform: translateX(-50%) scale(1.22);
        opacity: 1;
      }
    }

  
    /* 벚꽃 회전폭 줄이기: 더 잔잔하게 떨어지는 느낌 */
    @keyframes fall {
      0% {
        transform: translateY(-15vh) translateX(0) rotate(-18deg);
        opacity: 0;
      }

      8% {
        opacity: 0.72;
      }

      45% {
        transform: translateY(50vh) translateX(-56px) rotate(42deg);
      }

      100% {
        transform: translateY(120vh) translateX(-118px) rotate(96deg);
        opacity: 0;
      }
    }

    .petal {
      opacity: 0.62;
      filter: blur(0.62px);
    }

    .petal::after {
      opacity: 0.72;
    }

  
    /* 진행바 별빛 꼬리 디테일 */
    .scroll-progress {
      box-shadow:
        0 0 10px rgba(255,120,220,0.30),
        0 0 24px rgba(185,115,255,0.18),
        0 0 48px rgba(255,216,241,0.08);
    }

    .scroll-progress::before {
      opacity: 0.55;
      filter: blur(5px);
      background:
        linear-gradient(
          to bottom,
          rgba(255,255,255,0.20),
          rgba(255,216,241,0.15) 35%,
          rgba(255,216,241,0.04) 70%,
          rgba(255,255,255,0)
        );
    }

    .scroll-progress::after {
      box-shadow:
        0 0 14px rgba(255,235,248,0.98),
        0 0 30px rgba(255,120,220,0.52),
        0 0 58px rgba(185,115,255,0.28),
        0 -18px 22px rgba(255,216,241,0.20);
    }

    body.near-end .scroll-progress::after {
      animation: starPulseEnd 2.2s ease-in-out infinite;
    }

    @keyframes starPulseEnd {
      0%,100% {
        transform: translateX(-50%) scale(1.16);
        opacity: 0.96;
      }

      50% {
        transform: translateX(-50%) scale(1.42);
        opacity: 1;
      }
    }

  

    /* 폭죽이 터지는 순간: 암전 풀고 배경을 다시 은은하게 보여줌 */
    .birthday-overlay.firework-reveal {
      background: rgba(5, 0, 14, 0.34) !important;
      backdrop-filter: blur(5px) !important;
      transition: background 1.15s ease, backdrop-filter 1.15s ease !important;
    }

    .big-firework-flash {
      position: fixed;
      left: 50%;
      top: 47%;
      z-index: 8013;
      width: min(88vw, 980px);
      height: min(88vw, 980px);
      border-radius: 50%;
      pointer-events: none;
      background:
        radial-gradient(circle, rgba(255,255,255,0.62), rgba(255,216,241,0.30) 20%, rgba(255,120,220,0.16) 42%, transparent 72%);
      transform: translate(-50%, -50%) scale(0.12);
      animation: bigFireworkFlash 1.55s ease-out forwards;
    }

    @keyframes bigFireworkFlash {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
      20% { opacity: 1; }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
    }

    .big-firework-ring {
      position: fixed;
      left: 50%;
      top: 47%;
      z-index: 8014;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      pointer-events: none;
      border: 2px solid rgba(255, 232, 250, 0.82);
      box-shadow:
        0 0 18px rgba(255, 232, 250, 0.78),
        0 0 42px rgba(255, 120, 220, 0.42);
      transform: translate(-50%, -50%) scale(0.2);
      animation: bigFireworkRing 1.35s ease-out forwards;
    }

    @keyframes bigFireworkRing {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
      18% { opacity: 1; }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(var(--ring-scale, 18)); }
    }

    /* 카운트다운 0 이후 1초 정적 암전 */
    .birthday-overlay.silent-moment {
      background: rgba(0, 0, 0, 1) !important;
      backdrop-filter: blur(18px) !important;
    }

    .birthday-overlay.silent-moment .birthday-overlay-text {
      opacity: 0 !important;
    }

  
/* 폭죽 올라오기 전: 작은 점 하나가 아니라 꼬리빛이 있는 혜성처럼 */
.big-firework-rocket,
.final-firework-rocket {
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,226,248,0.98) 38%, rgba(255,122,214,0.52) 64%, rgba(255,122,214,0) 78%) !important;
  box-shadow:
    0 0 18px rgba(255, 238, 250, 1),
    0 0 42px rgba(255, 120, 220, 0.78),
    0 0 76px rgba(185, 115, 255, 0.44) !important;
  overflow: visible !important;
}

.big-firework-rocket::before,
.final-firework-rocket::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 11px;
  width: 6px;
  height: 120px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(255, 238, 250, 0.86),
    rgba(255, 150, 220, 0.42),
    rgba(185, 115, 255, 0.18),
    transparent
  );
  filter: blur(3px);
}

.big-firework-rocket::after,
.final-firework-rocket::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 26px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.55), transparent 16%),
    radial-gradient(circle at 18% 48%, rgba(255,216,241,0.42), transparent 14%),
    radial-gradient(circle at 78% 62%, rgba(185,115,255,0.34), transparent 16%);
  filter: blur(0.4px);
  opacity: 0.9;
  animation: rocketSparkle 0.42s ease-in-out infinite alternate;
}

@keyframes rocketSparkle {
  from {
    opacity: 0.36;
    transform: translateX(-50%) scale(0.82) rotate(-8deg);
  }
  to {
    opacity: 0.92;
    transform: translateX(-50%) scale(1.08) rotate(10deg);
  }
}

/* 암전 시간이 너무 길지 않게 전환감 보정 */
.birthday-overlay.dark {
  transition: background 0.42s ease, backdrop-filter 0.42s ease !important;
}


.rocket-trail-spark {
  position: fixed;
  z-index: 8013;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 238, 250, 0.96);
  box-shadow:
    0 0 10px rgba(255, 238, 250, 0.96),
    0 0 22px rgba(255, 120, 220, 0.62);
  animation: rocketTrailSpark 1.12s ease-out forwards;
}

@keyframes rocketTrailSpark {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.4);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift)), var(--rise)) scale(0.18);
  }
}


/* 인트로 안내 캐릭터 */
.guide-character-wrap {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(24px);
  z-index: 3500;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  opacity: 0;
  transition:
    opacity 1s ease,
    transform 1s ease;
  pointer-events: none;
}

.guide-character-wrap.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.guide-character {
  width: min(95px, 22vw);
  height: auto;

  filter:
    drop-shadow(0 10px 24px rgba(0,0,0,0.32))
    drop-shadow(0 0 18px rgba(255,120,220,0.16));

  animation: guideFloat 2.8s ease-in-out infinite alternate;
}

@keyframes guideFloat {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-6px);
  }
}

.guide-bubble {
  position: relative;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(20, 5, 35, 0.68);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  color: #ffe8f8;
  font-size: clamp(13px, 1.8vw, 17px);
  font-weight: 900;
  line-height: 1.6;
  text-align: left;
  word-break: keep-all;
  text-shadow:
    0 0 12px rgba(255,120,220,0.42);
  box-shadow:
    0 12px 34px rgba(0,0,0,0.28);
}

.guide-bubble::after {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 18px;
  border-right: 10px solid rgba(20, 5, 35, 0.68);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

@media (max-width: 640px) {
  .guide-character-wrap {
    bottom: 12px;
    gap: 10px;
  }

  .guide-character {
    width: 74px;
  }

  .guide-bubble {
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 12px;
  }
}


/* ===============================
   감성 디테일 polishing 적용
   =============================== */

#introTypingText {
  max-width: min(92vw, 980px);
  text-align: center;
  word-break: keep-all;
  animation: introTextBreath 3.2s ease-in-out infinite alternate;
}

@keyframes introTextBreath {
  from {
    transform: translateY(0);
    text-shadow: 0 0 24px rgba(255, 120, 220, 0.62);
  }
  to {
    transform: translateY(-3px);
    text-shadow:
      0 0 30px rgba(255, 216, 241, 0.86),
      0 0 62px rgba(185, 115, 255, 0.38);
  }
}

.ending-sequence-text.show,
.pause-section.active .pause-line,
.gallery-memory.active .memory-main {
  animation: softTextBreath 4.2s ease-in-out infinite alternate;
}

@keyframes softTextBreath {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-2px) scale(1.006);
  }
}

.depth-dim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(0,0,0,0), rgba(5,0,14,0.38)),
    rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 0.22s linear;
}

.gallery-item:hover {
  animation: polaroidTinyWiggle 1.8s ease-in-out infinite alternate;
}

@keyframes polaroidTinyWiggle {
  from {
    transform: scale(1.023) rotate(-0.35deg);
  }
  to {
    transform: scale(1.026) rotate(0.35deg);
  }
}

.gallery-item:hover img {
  transform: none !important;
}

body.ending-calm .petal {
  animation-duration: 18s !important;
  opacity: 0.42 !important;
  filter: blur(1.05px) !important;
}

body.final-still .petal {
  animation-play-state: paused !important;
  opacity: 0.34 !important;
  filter: blur(1.15px) !important;
}

body.final-still .cursor-glow {
  opacity: 0 !important;
}

#background-view {
  min-height: 118vh !important;
}

@media (max-width: 640px) {
  #introTypingText {
    white-space: normal !important;
    line-height: 1.45;
  }

  .gallery-item:hover {
    animation: none;
  }

  #background-view {
    min-height: 108vh !important;
  }
}


/* ===== ultra polish ===== */

.depth-vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at center,
    rgba(0,0,0,0) 0%,
    rgba(10,0,20,0.12) 45%,
    rgba(0,0,0,0.38) 100%);
  opacity:0;
  transition:opacity .35s ease;
}

body.deep-ending .depth-vignette{
  opacity:1;
}

#introTypingText{
  animation:introBreath 3.8s ease-in-out infinite alternate;
}

@keyframes introBreath{
  from{
    transform:translateY(0);
    text-shadow:0 0 18px rgba(255,120,220,.35);
  }
  to{
    transform:translateY(-3px);
    text-shadow:
      0 0 28px rgba(255,220,245,.78),
      0 0 58px rgba(185,115,255,.34);
  }
}

.message.show{
  animation:cardFloat 5s ease-in-out infinite alternate;
}

@keyframes cardFloat{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(-4px);
  }
}

.gallery-item{
  transition:
    transform .5s ease,
    box-shadow .5s ease,
    border-color .5s ease !important;
}

.gallery-item:hover{
  animation:tinyPaperMove 2.2s ease-in-out infinite alternate;
}

@keyframes tinyPaperMove{
  from{
    transform:scale(1.02) rotate(-0.4deg);
  }
  to{
    transform:scale(1.025) rotate(0.4deg);
  }
}

.final-signature{
  margin-top:52px;
  opacity:.42;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
  animation:signatureFade 4s ease-in-out infinite alternate;
}

@keyframes signatureFade{
  from{
    opacity:.22;
  }
  to{
    opacity:.52;
  }
}

body.deep-ending .petal{
  animation-duration:18s !important;
  opacity:.38 !important;
  filter:blur(1.2px) !important;
}

body.final-still .petal{
  animation-play-state:paused !important;
  opacity:.26 !important;
}

body.final-still .stars{
  opacity:.7;
}

body.final-still .bg{
  filter:brightness(.82);
}

#background-view{
  min-height:125vh !important;
}

.soft-ending-space{
  height:22vh;
}

@media(max-width:640px){

  .message.show{
    animation:none;
  }

  .gallery-item:hover{
    animation:none;
  }

  #background-view{
    min-height:112vh !important;
  }
}


/* =========================================================
   Final detail polish: no auto volume control
   ========================================================= */

/* 인트로 마지막 커서 여운 */
#introTypingText.cursor-hold::after {
  display: inline-block !important;
  animation: introCaretBlink 1.05s step-end infinite !important;
}

/* 커서 빛 idle */
.cursor-glow.idle {
  opacity: 0.06 !important;
  transition: opacity 1.5s ease !important;
}

/* 엔딩 별 하나 */
.tiny-ending-star {
  position: fixed;
  width: 132px;
  height: 2px;
  z-index: 8018;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.98),
      rgba(255,190,230,0.82),
      transparent
    );
  filter:
    drop-shadow(0 0 10px rgba(255,216,241,0.88))
    drop-shadow(0 0 22px rgba(255,120,220,0.32));
  animation: tinyEndingStar 4.8s ease-out forwards;
}

@keyframes tinyEndingStar {
  0% {
    opacity: 0;
    left: 106vw;
    top: 21vh;
    transform: rotate(-12deg) scaleX(0.45);
  }
  12% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    left: -18vw;
    top: 34vh;
    transform: rotate(-12deg) scaleX(1);
  }
}

/* 폭죽 후 남는 별가루 */
.firework-dust {
  position: fixed;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 8016;
  background: rgba(255,240,250,0.96);
  box-shadow:
    0 0 8px rgba(255,255,255,0.92),
    0 0 20px rgba(255,120,220,0.52);
  animation: fireworkDust 3.8s ease-out forwards;
}

@keyframes fireworkDust {
  0% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
      scale(0.12);
  }
}

/* 엔딩 집중감 */
body.final-still .gallery-item {
  filter: saturate(0.94);
}

body.final-still .message {
  backdrop-filter: blur(16px);
}

/* 마지막 여운 공간 */
.soft-ending-space {
  height: 22vh;
}


/* =========================================================
   Extra subtle details
   ========================================================= */

/* 롤링페이퍼 hover 시 벚꽃 아주 살짝 느려짐 */
body.message-focus .petal {
  animation-duration: 16s !important;
  opacity: 0.48 !important;
  filter: blur(0.95px) !important;

  transition:
    opacity 0.8s ease,
    filter 0.8s ease;
}


/* 모바일 렉 완화 */
@media (max-width: 640px) {
  .cursor-glow { display: none !important; }
  .stars { opacity: 0.65; }
  .petal { animation-duration: 18s !important; }
  .card { backdrop-filter: blur(8px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .petals, .stars, .cursor-glow { display: none !important; }
}