:root {
  --secret-ivory: #fffaf1;
  --secret-paper: #fffdf8;
  --secret-gold: #c9aa6a;
  --secret-gold-deep: #8d7146;
  --secret-pink: #f7e9e8;
  --secret-ink: #473f37;
}

body.is-secret-active {
  overflow: hidden;
  overscroll-behavior: none;
}

.music-mode-options .secret-mode-option {
  margin-top: 6px;
  border-color: rgba(141, 113, 70, .45);
  background: linear-gradient(135deg, rgba(255, 253, 248, .96), rgba(247, 233, 232, .72));
  color: var(--secret-gold-deep);
  letter-spacing: .16em;
}

.gift-opening.is-secret-opening {
  background: linear-gradient(180deg, #fffaf1, #fffdf8);
}

.gift-opening.is-secret-opening .gift-copy {
  opacity: .26;
  transition: opacity 1.2s ease;
}

.gift-opening.is-secret-opening .gift-tap {
  animation: secretTapAway .35s ease forwards;
}

.gift-opening.is-secret-opening .gift-lid {
  animation: secretLidOpen 1.5s cubic-bezier(.18, .72, .25, 1) .15s forwards;
}

.gift-opening.is-secret-opening .gift-base {
  animation: secretBoxSettle .9s ease-out both;
}

.gift-opening.is-secret-opening .gift-birthday,
.gift-opening.is-secret-opening .gift-burst {
  display: none;
}

.secret-experience {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--secret-ink);
  background: var(--secret-ivory);
  isolation: isolate;
}

.secret-opening,
.secret-stage,
.secret-ending,
.secret-video {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100svh;
  box-sizing: border-box;
}

.secret-opening {
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  background: rgba(255, 250, 241, 0);
}

.secret-opening-line,
.secret-ending-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(52vw, 260px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--secret-gold), transparent);
  transform: translate(-50%, -50%) scaleX(0);
  transform-origin: center;
}

.secret-opening-sheet {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 42%, rgba(255, 255, 255, .98), rgba(255, 253, 248, .9) 42%, rgba(255, 250, 241, .72) 72%),
    var(--secret-paper);
  opacity: 0;
  transform: scaleX(.04);
  transform-origin: center;
}

.secret-stage {
  z-index: 4;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .98), rgba(255, 250, 241, .92) 58%, rgba(247, 233, 232, .46)),
    var(--secret-ivory);
}

.secret-gallery {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: max(54px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(82px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.secret-image-stack {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.secret-photo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: min(86vw, 470px);
  height: min(76svh, 720px);
  padding: clamp(5px, 1.4vw, 9px);
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 18px 48px rgba(75, 59, 53, .16), 0 2px 10px rgba(141, 113, 70, .12);
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform, opacity;
}

.secret-photo.is-landscape {
  width: min(94vw, 900px);
  height: min(62svh, 620px);
}

.secret-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--secret-paper);
}

.secret-photo.is-entering {
  animation: secretPhotoReveal 1.4s cubic-bezier(.2, .62, .28, 1) both;
}

.secret-photo.is-leaving {
  animation: secretPhotoLeave 1.05s cubic-bezier(.35, 0, .4, 1) both;
  pointer-events: none;
}

.secret-photo.is-first-reveal {
  animation-duration: 1.9s;
}

.secret-photo.is-hero {
  box-shadow: 0 22px 58px rgba(75, 59, 53, .18), 0 0 0 1px rgba(201, 170, 106, .2);
}

.secret-photo.is-epilogue {
  width: min(90vw, 680px);
  height: min(78svh, 730px);
  padding: clamp(7px, 2vw, 12px);
}

.secret-photo.is-tone-transition {
  animation: secretToneReveal 1.45s ease both;
}

.secret-image-stack[data-layout="pair"] .secret-photo {
  width: min(75vw, 420px);
  height: min(69svh, 650px);
}

.secret-image-stack[data-layout="pair"] .secret-photo:nth-child(1) {
  transform: translate(-58%, -51%) rotate(-2deg) scale(.94);
}

.secret-image-stack[data-layout="pair"] .secret-photo:nth-child(2) {
  transform: translate(-42%, -48%) rotate(2deg) scale(.94);
}

.secret-image-stack[data-layout="triptych"] .secret-photo {
  width: min(69vw, 390px);
  height: min(64svh, 610px);
}

.secret-image-stack[data-layout="triptych"] .secret-photo:nth-child(1) {
  transform: translate(-62%, -50%) rotate(-3deg) scale(.89);
}

.secret-image-stack[data-layout="triptych"] .secret-photo:nth-child(2) {
  transform: translate(-50%, -52%) rotate(.5deg) scale(.94);
  z-index: 2;
}

.secret-image-stack[data-layout="triptych"] .secret-photo:nth-child(3) {
  transform: translate(-38%, -48%) rotate(3deg) scale(.89);
  z-index: 3;
}

/* 縦横混在sceneでは、横写真を横長の写真面として前へ出します。 */
.secret-image-stack.is-mixed-orientation[data-layout="pair"] .secret-photo.is-landscape,
.secret-image-stack.is-mixed-orientation[data-layout="triptych"] .secret-photo.is-landscape {
  width: min(calc(100vw - 20px), 720px);
  height: auto;
  aspect-ratio: var(--secret-photo-ratio, 3 / 2);
  padding: clamp(5px, 1.4vw, 8px);
}

.secret-image-stack.is-mixed-orientation .secret-photo.is-landscape-featured {
  z-index: 8 !important;
  opacity: 1;
  transform: translate(-50%, -43%) rotate(.45deg);
}

.secret-image-stack.is-mixed-orientation .secret-photo.is-background-photo {
  z-index: 2 !important;
  opacity: .56;
  filter: saturate(.82) brightness(1.03);
  transform: translate(-54%, -55%) rotate(-2deg) scale(.84);
}

.secret-image-stack.is-mixed-orientation .secret-photo.is-background-photo:nth-child(even) {
  transform: translate(-46%, -52%) rotate(2deg) scale(.84);
}

.secret-image-stack.is-mixed-orientation .secret-photo.is-landscape-featured.is-entering {
  animation-name: secretLandscapeFeatureReveal;
}

.secret-image-stack.is-mixed-orientation .secret-photo.is-background-photo.is-entering {
  animation-name: secretBackgroundPhotoReveal;
}

.secret-soft-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .2) 47%, transparent 62%);
  mix-blend-mode: screen;
}

.secret-progress {
  position: absolute;
  z-index: 8;
  top: max(14px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: rgba(71, 63, 55, .62);
  font: 500 11px/1.2 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  letter-spacing: .12em;
}

.secret-progress-track {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: rgba(141, 113, 70, .22);
}

.secret-progress-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--secret-gold);
  transition: width .16s linear;
}

.secret-controls {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 48px);
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(201, 170, 106, .22);
  border-radius: 999px;
  background: rgba(255, 253, 248, .82);
  box-shadow: 0 12px 32px rgba(75, 59, 53, .12);
  backdrop-filter: blur(12px);
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}

.secret-controls.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.secret-controls button,
.secret-route-menu-card button,
.secret-ending-actions button,
.secret-video-back {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(141, 113, 70, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--secret-ink);
  font: inherit;
  cursor: pointer;
}

.secret-controls button {
  width: 100%;
  height: 46px;
}

.secret-controls button:focus-visible,
.secret-route-menu-card button:focus-visible,
.secret-ending-actions button:focus-visible,
.secret-video-back:focus-visible,
.secret-gallery:focus-visible {
  outline: 3px solid rgba(134, 217, 245, .72);
  outline-offset: 3px;
}

.secret-route-menu {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 20px max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  background: rgba(71, 63, 55, .16);
  backdrop-filter: blur(8px);
}

.secret-route-menu-card {
  position: relative;
  display: grid;
  gap: 10px;
  width: min(100%, 360px);
  padding: 26px 18px 18px;
  border: 1px solid rgba(201, 170, 106, .28);
  border-radius: 24px;
  background: rgba(255, 253, 248, .96);
  box-shadow: 0 20px 55px rgba(75, 59, 53, .16);
}

.secret-route-menu-card p {
  margin: 0 0 2px;
  color: var(--secret-gold-deep);
  text-align: center;
  letter-spacing: .2em;
}

.secret-route-menu-card > button:not(:first-child) {
  width: 100%;
  border-radius: 14px;
}

#secretRouteMenuClose {
  position: absolute;
  top: 6px;
  right: 8px;
  border-color: transparent;
  background: transparent;
  font-size: 24px;
}

.secret-ending {
  z-index: 12;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  padding: max(36px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .98), rgba(255, 250, 241, .95) 58%, rgba(247, 233, 232, .55)),
    var(--secret-ivory);
  animation: secretEndingReveal 2.2s ease both;
}

.secret-ending-line {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}

.secret-ending > p {
  margin: min(11svh, 84px) 0 0;
  color: var(--secret-gold-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 5vw, 27px);
  letter-spacing: .38em;
  text-indent: .38em;
}

.secret-ending-actions {
  display: grid;
  gap: 10px;
  width: min(78vw, 300px);
}

.secret-ending-actions button {
  width: 100%;
  border-radius: 14px;
  background: rgba(255, 253, 248, .88);
}

.secret-video {
  z-index: 15;
  display: grid;
  place-items: center;
  padding: max(70px, calc(env(safe-area-inset-top) + 56px)) max(12px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: #171513;
}

.secret-video video {
  display: block;
  width: min(100%, 960px);
  max-height: calc(100svh - 122px);
  background: #000;
}

.secret-video-back {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  padding: 0 16px;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(23, 21, 19, .82);
  color: white;
}

@keyframes secretTapAway {
  to { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
}

@keyframes secretLidOpen {
  to { transform: translateY(-30px) rotate(-7deg); }
}

@keyframes secretBoxSettle {
  45% { transform: translateY(-5px) scale(1.015); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes secretPhotoReveal {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.985); }
  to { opacity: 1; }
}

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

@keyframes secretLandscapeFeatureReveal {
  from { opacity: 0; transform: translate(-50%, -40%) rotate(.45deg) scale(.94); }
  to { opacity: 1; }
}

@keyframes secretBackgroundPhotoReveal {
  from { opacity: 0; }
  to { opacity: .56; }
}

@keyframes secretToneReveal {
  from { opacity: 0; filter: grayscale(1); }
  to { opacity: 1; filter: grayscale(0); }
}

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

@media (max-width: 374px) {
  .secret-gallery {
    padding-inline: max(8px, env(safe-area-inset-left));
  }

  .secret-photo {
    width: min(90vw, 420px);
    height: min(73svh, 620px);
  }

  .secret-photo.is-landscape {
    width: 96vw;
    height: min(55svh, 480px);
  }

  .secret-controls {
    grid-template-columns: repeat(4, 46px);
    gap: 5px;
    padding: 6px;
  }

  .secret-image-stack[data-layout="triptych"] .secret-photo {
    width: min(72vw, 340px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gift-opening.is-secret-opening .gift-tap,
  .gift-opening.is-secret-opening .gift-lid,
  .gift-opening.is-secret-opening .gift-base,
  .secret-photo.is-entering,
  .secret-photo.is-leaving,
  .secret-photo.is-tone-transition {
    animation-duration: .12s !important;
    animation-delay: 0s !important;
  }

  .secret-ending {
    animation-duration: .12s;
  }

  .secret-controls,
  .secret-progress-track i {
    transition-duration: .1s;
  }

  .secret-soft-light {
    display: none;
  }
}