/* ==========================================================================
   page_sweetsour.css — "Sweet Sour" lyric narrative
   A centered, scrolling column: title, then repeating [auto-rotating photo
   carousel] -> [lyric-text image], closing on the end mark. All lyric text is
   baked into transparent-background PNGs (3_Text/*), so the page holds no live
   copy; the only chrome text is the fixed menu bar. Photo groups with more than
   one variant (2_Photos/N_SweetSour_*) cross-fade automatically — no UI.
   ========================================================================== */

/* ----------------------------------------------------------------
   WIP PASSWORD GATE
----------------------------------------------------------------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(180deg, #edf9ff 0%, #bfe4fb 100%);
}

html.unlocked .gate {
  display: none;
}

.gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 380px;
  padding: 40px 34px;
  text-align: center;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.gate-card .gate-text {
  margin: 0 0 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #5a5a5a;
}
.gate-card .gate-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  color: #000;
  background: #fff;
  border: 1px solid #c1c1c1;
  border-radius: 8px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}
.gate-card .gate-input::placeholder {
  color: #cfcfcf;
}
.gate-card .gate-input.invalid {
  border-color: #e0584f;
  box-shadow: inset 0 0 4px rgba(224, 88, 79, 0.4);
}
.gate-card .gate-btn {
  width: 100%;
  margin-top: 14px;
  padding: 12px 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #7fce5a 0%, #54ac32 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: filter 0.2s ease-in-out;
}
@media (hover: hover) {
  .gate-card .gate-btn:hover {
    filter: brightness(1.05);
  }
}
.gate-card .gate-error {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #e0584f;
}

.ss-body {
  margin: 0;
  background: #ffffff;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
}

.ss {
  /* Sizes mirror the Figma desktop frame exactly. --ss-w is the standard photo
     width (600px in Figma); --k scales every fixed Figma px down together on
     narrow screens so proportions are preserved. */
  --ss-w: min(600px, 84vw);
  --ss-text: calc(var(--ss-w) * 450 / 600); /* lyric-text block width */
  --ss-gap: calc(
    var(--ss-w) * 96 / 600
  ); /* vertical breathing room between slots */
  color: #1b1220;
  padding-top: 0; /* clear the fixed menu bar */
}

/* prevent ghost-drag / selection of the image-only content */
.ss img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- Fixed menu bar ----------------------------------------------------- */
.ss-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 43px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  box-sizing: border-box;
  background: #26222c; /* solid — was translucent, which showed through on iOS */
  color: #f4eef6;
  font-family: "DotGothic16", monospace;
}

.ss-menu-home {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ss-menu-home img {
  width: 22px;
  height: 22px;
  display: block;
}

.ss-menu-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ss-menu-sound {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.ss-sound-on,
.ss-sound-off {
  width: 20px;
  height: 20px;
  display: block;
}
.ss-sound-off {
  display: none;
}
.ss[data-muted="true"] .ss-sound-on {
  display: none;
}
.ss[data-muted="true"] .ss-sound-off {
  display: block;
}

/* ---- Title -------------------------------------------------------------- */
.ss-header {
  position: relative;
  width: calc(
    var(--ss-w) * 404 / 600
  ); /* Figma Logo3 is 404px wide, not full column */
  margin: 30vh auto 0; /* drop the title toward the middle of the first screen */
}
.ss-title {
  display: block;
  width: 100%;
  height: auto;
}

/* Animated black hearts flanking the wordmark (top third of the title block). */
.ss-heart {
  position: absolute;
  height: auto;
  pointer-events: none;
}
.ss-header .ss-heart--l {
  width: 14.4%;
  left: -17.5%;
  top: -4.8%;
  transform: rotate(-16deg);
}
.ss-header .ss-heart--r {
  width: 12.9%;
  right: -16%;
  top: 16.3%;
  transform: rotate(16deg) scaleX(-1);
}

/* ---- Narrative flow ----------------------------------------------------- */
.ss-flow {
  margin: 150px auto 0; /* generous gap under the title */
}

.ss-slot {
  position: relative;
  width: var(--ss-w);
  margin: 0 auto;
  padding: calc(var(--ss-gap) / 2) 0; /* uniform vertical rhythm between slots */
}
/* wide slots — Figma photos are 700px here, not the standard 600 */
.ss-slot[data-slot="4"],
.ss-slot[data-slot="5"] {
  width: min(calc(var(--ss-w) * 700 / 600), 94vw);
}
/* slot 23: extra gap so the Spin gif sits between photo and text (per Figma) */
.ss-slot[data-slot="23"] .ss-textwrap {
  margin-top: calc(var(--ss-w) * 100 / 600);
}

/* Media box: sets the photo aspect and anchors photo-side gifs. Not clipped. */
.ss-media {
  position: relative;
  width: 100%;
}
.ss-media[data-aspect="4x3"] {
  aspect-ratio: 4 / 3;
}
.ss-media[data-aspect="3x2"] {
  aspect-ratio: 3 / 2;
}
.ss-media[data-aspect="2x3"] {
  aspect-ratio: 2 / 3;
  width: calc(var(--ss-w) * 450 / 600);
  max-width: 100%;
  margin: 0 auto;
}

.ss-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #e9eef5;
  border-radius: 2px;
}
.ss-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 0.9s ease;
}
/* keep the visible image on top of the stack so right-click / open-in-new-tab
   targets it (opacity alone doesn't change the hit target). */
.ss-photo.is-active {
  opacity: 1;
  z-index: 1;
}

/* Text block: baked lyric image at the Figma width (450px), centred. */
.ss-textwrap {
  position: relative;
  z-index: 2;
  width: var(--ss-text);
  max-width: 100%;
  margin: calc(var(--ss-w) * 26 / 600) auto 0;
}
.ss-text {
  display: block;
  width: 100%;
  height: auto;
}
.ss-text + .ss-text {
  margin-top: 10px;
}

/* Decorative overlays — inline left/top/width are % of the anchor box. */
.ss-gif {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: 3;
}

/* ---- Two-column slots (desktop) ---------------------------------------- */
.ss-slot--zig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: calc(var(--ss-w) * 40 / 600);
  row-gap: calc(var(--ss-w) * 46 / 600);
}
.ss-slot[data-slot="3"] {
  width: min(calc(var(--ss-w) * 940 / 600), 96vw);
}
.ss-slot[data-slot="13"],
.ss-slot[data-slot="20"] {
  width: min(calc(var(--ss-w) * 1040 / 600), 96vw);
}

.ss-slot--six {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 94vw;
  padding-right: calc(
    var(--ss-w) * 340 / 600
  ); /* room for the 450px text overlapping out */
}
.ss-six-photo {
  width: calc(var(--ss-w) * 450 / 600);
}

.ss-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.ss-cell--text {
  align-items: center;
}
.ss-cell .ss-media {
  width: 100%;
}
.ss-cell .ss-textwrap {
  width: var(--ss-text);
  max-width: 100%;
  margin: 0 auto;
}

/* slot 13: small tilted umbrella at the top-left of the text, before line 1 */
.ss-umbrella {
  left: 9%;
  top: -17%;
  width: 16%;
  transform: rotate(-28deg);
  z-index: 3;
}

/* slot 6 right column: text tucked UNDER the portrait (photo on top, per Figma);
   only the part of the text past the photo's right edge shows. */
.ss-slot--six .ss-media[data-aspect="2x3"] {
  width: 100%;
  margin: 0;
}
.ss-slot--six .ss-six-photo {
  z-index: 2; /* portrait sits above the overlapping text */
}
.ss-six-side {
  position: absolute;
  z-index: 1;
  top: 80%; /* text sits low over the portrait, per Figma */
  left: calc(
    var(--ss-w) * 290 / 600
  ); /* ~64% into the photo, matching Figma x735 */
  transform: translateY(-50%);
  width: var(--ss-text); /* 450px lyric-text width, per Figma */
}
.ss-six-side .ss-textwrap {
  width: 100%;
  margin: 0;
}
.ss-six-side .ss-text--mob {
  display: none; /* desktop shows 6_Text; mobile swaps to 6_Text_mobile */
}
.ss-six-bar {
  position: absolute;
  right: calc(
    var(--ss-w) * -38 / 600
  ); /* just past the text's right edge, per Figma */
  top: 50%;
  transform: translateY(-50%);
  height: calc(var(--ss-w) * 300 / 600);
  width: auto;
  pointer-events: none;
}
.ss-six-heart {
  position: absolute;
  right: calc(var(--ss-w) * -58 / 600);
  top: calc(var(--ss-w) * -131 / 600);
  width: calc(var(--ss-w) * 72 / 600);
  height: auto;
  pointer-events: none;
}

@media (max-width: 760px) {
  /* all lyric text blocks 10% larger on mobile (450 -> 495) */
  .ss {
    --ss-text: calc(var(--ss-w) * 495 / 600);
  }
  .ss-slot--zig,
  .ss-slot--six,
  .ss-slot[data-slot="3"],
  .ss-slot[data-slot="13"],
  .ss-slot[data-slot="20"] {
    width: var(--ss-w);
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: calc(var(--ss-w) * 20 / 600);
  }
  /* extra gap between slot 3 and slot 4 on mobile */
  .ss-slot[data-slot="3"] {
    margin-bottom: calc(var(--ss-w) * 56 / 600);
  }
  .ss-slot--six {
    display: block;
    padding-right: 0;
  }
  .ss-six-photo {
    width: 100%;
  }
  .ss-slot--six .ss-media[data-aspect="2x3"] {
    width: calc(var(--ss-w) * 450 / 600);
    margin: 0 auto;
  }
  /* right side sits under the portrait, aligned to it: text + bar + heart row */
  .ss-six-side {
    position: relative;
    transform: none;
    left: auto;
    width: calc(var(--ss-w) * 450 / 600);
    margin: calc(var(--ss-w) * 22 / 600) -1vw 0 auto;
    padding-right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--ss-w) * 10 / 600);
  }
  /* stack the pink heart above the vertical bar (not side by side) */
  .ss-six-accent {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: calc(var(--ss-w) * 6 / 600);
  }
  .ss-header .ss-heart--l,
  .ss-header .ss-heart--r {
    width: 33px;
  }
  .ss-six-side .ss-textwrap {
    width: auto;
    margin: 0;
  }
  .ss-six-side .ss-text--desk {
    display: none;
  }
  .ss-six-side .ss-text--mob {
    display: block;
    height: 100px;
    width: auto;
  }
  .ss-six-bar {
    display: block;
    position: static;
    transform: none;
    height: calc(var(--ss-w) * 120 / 600);
    width: auto;
  }
  .ss-six-heart {
    display: block;
    position: static;
    top: auto;
    right: auto;
    width: calc(var(--ss-w) * 44 / 600);
    height: auto;
  }
  .ss-end .ss-heart--l,
  .ss-end .ss-heart--r {
    width: calc(var(--ss-w) * 25 / 600);
  }
  /* slot 13: put the umbrella text below its photo on mobile (swap cells 1 & 2) */
  .ss-slot[data-slot="13"] .ss-cell:nth-child(2) {
    order: 1;
  }
  .ss-slot[data-slot="13"] .ss-cell:nth-child(1) {
    order: 2;
    margin-top: calc(var(--ss-w) * 24 / 600);
    margin-bottom: calc(var(--ss-w) * 24 / 600);
  }
  .ss-slot[data-slot="13"] .ss-cell:nth-child(3) {
    order: 3;
  }
  .ss-slot[data-slot="13"] .ss-cell:nth-child(4) {
    order: 4;
  }
  /* slot 20: 20_Text_2 goes under photo 2 on mobile (swap cells 3 & 4) */
  .ss-slot[data-slot="20"] .ss-cell:nth-child(4) {
    order: 3;
  }
  .ss-slot[data-slot="20"] .ss-cell:nth-child(3) {
    order: 4;
  }
}

/* ---- End mark ----------------------------------------------------------- */
.ss-end {
  position: relative;
  width: var(--ss-w);
  margin: calc(var(--ss-gap) / 2) auto calc(var(--ss-w) * 120 / 600);
  text-align: center;
}
.ss-end-text {
  display: inline-block;
  width: var(--ss-text); /* 450px box, matching Figma */
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
/* hearts hug the small centred "THE END", sized exactly per Figma (41 / 44px) */
.ss-end .ss-heart {
  position: absolute;
  top: 50%;
  height: auto;
}
.ss-end .ss-heart--l {
  width: calc(var(--ss-w) * 34 / 600);
  right: 50%;
  margin-right: calc(var(--ss-w) * 30 / 600);
  transform: translateY(-50%);
}
.ss-end .ss-heart--r {
  width: calc(var(--ss-w) * 34 / 600);
  left: 50%;
  margin-left: calc(var(--ss-w) * 30 / 600);
  transform: translateY(-50%) scaleX(-1);
}

/* ---- Responsive tweaks -------------------------------------------------- */
@media (max-width: 560px) {
  .ss-menu-title {
    font-size: 9px;
  }
}