/* =========================================================
   İSTANBUL PİLİÇ — SHOWCASE
   Six products on one pinned, scrubbed stage.
   Spec: Figma "Showcase — Motion Spec"
   · stage bg butter/50 · diamond hairline frame
   · garnish particles (sparkle / daisy / burst / pebble / ring)
   · split-flap terminal (title top-left, detail card bottom-left)
   · detail card = "The Tag", 3 colorways (A sage / B forest / C coral)
   Motion lives in js/showcase.js — everything here is
   transform/filter/opacity-friendly (GPU-composited, no layout).
   ========================================================= */

/* The section (and the ScrollTrigger pin-spacer that wraps it, which
   inherits the -38vh overlap) rides up over the hero and z-above it, so the
   whole stage is click-transparent — only the detail card opts back in. */
.pin-spacer:has(> .showcase) {
  pointer-events: none;
}

.showcase {
  position: relative;
  z-index: 6;               /* above the hero so product 01 can dolly through the seam */
  pointer-events: none;
  background: var(--neutral-100);
  /* the on-screen length of every product's LONG side. Horizontal shots are
     pinned by width, vertical shots by height, both to this value — so a
     900-wide shot and a 900-tall shot read at the same scale (the vertical's
     height equals the horizontal's width). */
  --sc-size: min(62vh, 50vw);
}

/* Pull the stage up over the end of the hero's sticky travel. The hero
   (css/opening.css) is a 280vh track with a 100vh sticky stage; its last
   ~17% is the hand-off where "Featured ▢ products" leaves. -100vh lines the
   pin start up exactly with the stage's release, so product 01's dolly is
   the first beat after the words have gone (an overlap put the huge,
   blurred first frame of the dolly over the title). The stage is
   transparent and the hero ends on bare paper, so the hero scrolling away
   underneath is invisible. */
.showcase {
  margin-top: -100vh;
  background: transparent;
}

.sc-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: visible;        /* entries/exits fly beyond the viewport edges */
}

/* ---------- the heart: diamond + product (spirals away as one on X1 exits) ---------- */
.sc-heart {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  /* purely visual — product 01 dollies up through the hero seam, and this
     full-bleed layer must not eat clicks meant for the hero (e.g. the reel) */
  pointer-events: none;
}

.sc-products {
  position: absolute;
  inset: 0;
}

.sc-product {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

.sc-product-float {
  will-change: transform;
}

/* Horizontal shots (default): the long side is the WIDTH. */
.sc-product img {
  width: var(--sc-size);
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  will-change: filter;
  user-select: none;
  -webkit-user-drag: none;
}

/* Vertical shots: the long side is the HEIGHT — set to the same --sc-size so
   the height of a vertical product matches the width of a horizontal one, and
   all six read at one consistent size on screen. */
.sc-product--v img {
  width: auto;
  height: var(--sc-size);
  max-width: 48vw;
}

/* ---------- progress rail — one mark per product, right edge ----------
   A stack of hairlines, one per product. The active mark widens and warms
   to coral; the marks below it are the products still to come, so the rail
   reads at a glance as "how many are left". Absolute inside the pinned
   stage, so it holds its place through the whole scrubbed sequence. */
.sc-progress {
  --rail-right: max(24px, 2vw);
  position: absolute;
  right: var(--rail-right);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 15px;
  opacity: 0;
  transition: opacity 0.5s var(--ease-soft);
  pointer-events: none;
}

.sc-progress.is-visible {
  opacity: 1;
}

.sc-progress-mark {
  display: block;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: var(--neutral-900);
  opacity: 0.26;
  transition:
    width 0.45s var(--ease-soft),
    background-color 0.45s var(--ease-soft),
    opacity 0.45s var(--ease-soft);
}

.sc-progress-mark.is-active {
  width: 30px;
  background: var(--coral-500);
  opacity: 1;
}

/* "01 / 06" heads the rail */
.sc-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 8px;
  font-family: var(--font-text);
  color: var(--neutral-900);
  white-space: nowrap;
}

.sc-count-num {
  display: inline-flex;
  align-items: baseline;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--neutral-400);
}

.sc-count-mask {
  display: inline-block;
  overflow: hidden;
  height: 1.25em;
  line-height: 1.25;
}

.sc-count-cur {
  display: inline-block;
  color: var(--neutral-900);
}

@media (max-width: 900px) {
  .sc-progress {
    gap: 12px;
  }

  .sc-count {
    display: none;
  }

  .sc-progress-mark {
    width: 12px;
  }

  .sc-progress-mark.is-active {
    width: 24px;
  }
}

/* ---------- product caption — set straight on the paper, bottom-left ----------
   No card. The name in display type, one line of copy, the specs and
   the category link. Every
   line sits in its own mask; JS stacks one layer per product at the same
   baseline and swaps them — the old lines rise out as the new rise in. */
.sc-info {
  position: absolute;
  /* under the products (.sc-heart is 2): a product flying in sweeps OVER
     the type rather than the type printing across a blurred product.
     The products are click-through, so the link still works. */
  z-index: 1;
  left: var(--pad-side);
  bottom: 8vh;
  width: min(25vw, 360px);
  color: var(--neutral-900);
  pointer-events: none;
}

.sc-info-layer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.sc-info-layer.is-current .sc-info-cta {
  pointer-events: auto;
}

/* the clip leaves room for Melodrama's descenders and Turkish accents */
.sc-info-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.1em 0 0.14em;
  margin: -0.1em 0 -0.14em;
}

.sc-info-line {
  display: inline-block;
}

.sc-info-name {
  margin: 0 0 18px;
  font: 400 clamp(44px, 4.6vw, 72px)/0.98 var(--font-display);
  letter-spacing: calc(-0.02em + var(--display-fit, 0em));
  color: var(--neutral-900);
}

.sc-info-desc {
  margin: 0 0 24px;
  max-width: 30ch;
  font: 400 15px/1.5 var(--font-text);
  color: var(--neutral-700);
}

.sc-info-desc .sc-info-mask {
  display: block;
}

.sc-info-specs {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  font: 500 11px/1.2 var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-900);
}

.sc-info-sep {
  width: 1px;
  height: 12px;
  background: var(--neutral-900);
  opacity: 0.25;
}

.sc-info-cta {
  position: relative;
  display: inline-flex;
  padding-bottom: 7px;
  font: 500 14px/1.2 var(--font-text);
  color: var(--neutral-900);
  text-decoration: none;
  transition: color 0.35s var(--ease-soft);
}

.sc-info-cta .sc-info-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sc-info-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.45s var(--ease-soft);
}

.sc-info-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
}

.sc-info-cta:hover,
.sc-info-cta:focus-visible {
  color: var(--coral-600);
}

.sc-info-cta:hover .sc-info-arrow,
.sc-info-cta:focus-visible .sc-info-arrow {
  transform: translate(3px, -3px);
}

.sc-info-cta:focus-visible {
  outline: 2px solid var(--coral-600);
  outline-offset: 4px;
}

/* ===========================================================
   FALLBACK — crossfade slideshow, no pin
   (prefers-reduced-motion, and the ≤900px mobile flow)
   =========================================================== */
.showcase.sc-simple .sc-stage {
  overflow: hidden;
}

.showcase.sc-simple .sc-product {
  opacity: 0;
  transition: opacity 0.6s var(--ease-soft);
}

.showcase.sc-simple .sc-product.is-on {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* the hero has no sticky travel here, so there is nothing to overlap */
  .showcase {
    margin-top: 0;
  }

  .showcase.sc-simple .sc-product {
    transition-duration: 0.25s;
  }

  .sc-info-cta,
  .sc-info-arrow {
    transition-duration: 0.01s;
  }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 900px) {
  .showcase {
    --sc-size: min(50vh, 86vw);
  }

  .sc-product img {
    max-height: 62vh;
  }

  .sc-product--v img {
    max-width: 88vw;
  }

  /* small screens: the caption spans the width under the product */
  .sc-info {
    right: var(--pad-side);
    bottom: 5vh;
    width: auto;
  }

  .sc-info-name {
    font-size: clamp(34px, 7vw, 52px);
  }
}

/* Phones: the product stage stops above the caption, so the product sits
   in the upper part of the screen and the full caption — name, copy,
   specs, link — reads on clear paper underneath. Only the stage box moves;
   GSAP's transforms ride on the products inside it. */
@media (max-width: 560px) {
  .showcase {
    --sc-cap: clamp(232px, 32svh, 300px);
    --sc-size: min(40svh, 86vw);
  }

  .sc-products {
    top: 64px;
    bottom: var(--sc-cap);
  }

  .sc-product img {
    max-height: calc(100svh - 64px - var(--sc-cap));
  }

  .sc-info {
    bottom: max(28px, 4.5svh);
  }

  .sc-info-name {
    margin-bottom: 12px;
    font-size: clamp(38px, 10.6vw, 46px);
  }

  .sc-info-desc {
    max-width: 34ch;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
  }

  .sc-info-specs {
    margin-bottom: 18px;
  }
}