/* ==========================================================================
   SHOWCASE: the five floating glass panels.

   Two versions:
   1. DEFAULT (phones, and anyone without JavaScript): a row of glass cards
      you swipe sideways. Uses the phone's own scrolling (CSS scroll-snap).
   2. PINNED (desktop): js/showcase.js adds .showcase--pinned. The section
      becomes tall, the stage sticks to the screen, and your normal vertical
      scrolling moves the panels right-to-left. JS only swaps classes
      (is-active / is-next / is-prev / is-away-*); CSS does all the movement.
   ========================================================================== */

/* ---------- 1. DEFAULT: swipeable row ---------- */
.showcase { position: relative; padding: clamp(24px, 6vh, 64px) 0; }
.showcase__sticky { position: relative; }
.ambient { display: none; }

.showcase__track {
  display: flex;
  align-items: flex-start;         /* each card is as tall as its own content */
  gap: 14px;
  padding: 16px 6vw 32px;
  overflow-x: auto;
  overflow-y: hidden;              /* height follows the current card (set by showcase.js) */
  transition: height var(--dur) var(--ease);
  scroll-snap-type: x mandatory;   /* each swipe settles on a card */
  overscroll-behavior-x: contain;  /* sideways swipes don't trigger "back" in the browser */
  scrollbar-width: none;
}
.showcase__track::-webkit-scrollbar { display: none; }

.panel {
  flex: 0 0 min(88vw, 560px);
  scroll-snap-align: center;
}

/* The glass itself. On phones it's a calm frosted surface (no live blur: it's costly on mobile). */
.panel__surface {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 36px);
  height: 100%;
  padding: clamp(22px, 5vw, 32px);
  border-radius: var(--radius-panel);
  background: #F7F5F0;
  border: 1px solid var(--glass-edge);
  box-shadow: 0 0 0 1px var(--glass-line), var(--soft-shadow);
}

/* ---------- Controls: skip link, progress, arrows ---------- */
.showcase__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 6vw;
}
.showcase__skip {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-underline-offset: 4px;
}
.showcase__skip:hover { color: var(--ink); }

.progress { display: flex; align-items: center; gap: 14px; }
.progress__count { font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; }
.progress__marks { display: none; gap: 6px; }
.progress__marks i {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.16);
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.progress__marks i.is-current { width: 30px; background: var(--ink); }
@media (min-width: 600px) { .progress__marks { display: flex; } }

.showcase__arrows { display: flex; gap: 10px; }
.arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: 0 0 0 1px var(--glass-line), var(--soft-shadow);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur) var(--ease);
}
.arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.arrow:hover:not(:disabled) { transform: translateY(-1px); }
.arrow:active:not(:disabled) { transform: scale(0.96); }
.arrow:disabled { opacity: 0.35; cursor: default; }

/* ---------- 2. PINNED: the desktop stage ---------- */
@media (min-width: 900px) {
  /* The section is tall so there's scroll "distance" to move through the panels.
     One panel per --scroll-per-panel of scrolling, plus one screen for the stage itself. */
  .showcase--pinned {
    height: calc(100vh + var(--count) * var(--scroll-per-panel));
    padding: 0;
  }
  /* The stage sticks to the screen while you scroll through the section, then lets go. */
  .showcase--pinned .showcase__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }

  /* Soft light shapes behind the glass */
  .showcase--pinned .ambient { display: block; position: absolute; inset: 0; pointer-events: none; }
  .ambient span {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(150, 138, 118, 0.26), rgba(150, 138, 118, 0));
  }
  .ambient span:nth-child(1) { width: 52vw; height: 52vw; left: 6vw; top: 4vh; }
  .ambient span:nth-child(2) { width: 40vw; height: 40vw; right: 4vw; top: 30vh; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0)); }
  .ambient span:nth-child(3) { width: 34vw; height: 34vw; left: 36vw; bottom: -12vh; }

  .showcase--pinned .showcase__track {
    display: block;
    position: absolute;
    inset: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* Every panel sits in the same spot. Its state class sets --x (sideways),
     --s (size), opacity and blur. Changing the class makes CSS animate between them. */
  .showcase--pinned .panel {
    --x: 0px;
    --s: 1;
    position: absolute;
    left: 50%;
    top: calc(var(--header-h) + (100vh - var(--header-h) - 96px) / 2);
    width: min(1120px, 78vw);
    height: min(calc(100vh - var(--header-h) - 150px), 700px);
    transform: translate(-50%, -50%) translateX(var(--x)) scale(var(--s));
    transition:
      transform var(--dur-glide) var(--ease-glide),
      opacity var(--dur-glide) var(--ease-glide),
      filter var(--dur-glide) var(--ease-glide),
      visibility 0s linear 0s;
    perspective: 1400px;           /* gives the gentle cursor tilt real depth */
    will-change: transform;        /* let the browser prepare panels for movement.
                                      (Not opacity/filter: those would switch the glass off.) */
  }

  /* In the centre: full size, sharp, and NO filter or opacity, because either one would
     stop the glass from seeing (and blurring) what's behind it. */
  .showcase--pinned .panel.is-active { --x: 0px; --s: 1; opacity: 1; filter: none; z-index: 3; }

  /* Waiting at the edges: smaller, softer, dimmer */
  .showcase--pinned .panel.is-next { --x: 64vw; --s: 0.84; opacity: 0.5; filter: blur(5px); z-index: 2; }
  .showcase--pinned .panel.is-prev { --x: -64vw; --s: 0.84; opacity: 0.5; filter: blur(5px); z-index: 2; }

  /* Further away: off-screen and hidden (after they've finished moving) */
  .showcase--pinned .panel.is-away-right,
  .showcase--pinned .panel.is-away-left {
    --s: 0.78;
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--dur-glide) var(--ease-glide),
      opacity var(--dur-glide) var(--ease-glide),
      filter var(--dur-glide) var(--ease-glide),
      visibility 0s linear var(--dur-glide);
  }
  .showcase--pinned .panel.is-away-right { --x: 120vw; }
  .showcase--pinned .panel.is-away-left { --x: -120vw; }

  /* The real glass, on desktop */
  .showcase--pinned .panel__surface {
    padding: clamp(32px, 4vw, 60px);
    overflow: auto;                 /* safety net for short screens */
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),   /* bright top edge */
      0 0 0 1px var(--glass-line),               /* faint outline */
      var(--float-shadow);                       /* floating depth */
    /* The gentle tilt towards the cursor (values set by js/glass.js) */
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  }

  /* The sheen: a soft light on the glass that follows the orb (position set by js/glass.js) */
  .showcase--pinned .panel__surface::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(560px circle at var(--light-x, 22%) var(--light-y, 0%),
      rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 62%);
    opacity: var(--light-strength, 0.55);
    transition: opacity 600ms var(--ease);
  }
  /* Content sits above the sheen */
  .showcase--pinned .panel__surface > * { position: relative; }

  /* Controls float under the stage */
  .showcase--pinned .showcase__controls {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 3.5vh, 36px);
    width: min(1120px, 78vw);
    padding: 0;
    transform: translateX(-50%);
  }

  /* ---- Case study (04): a little more room than the other panels ---- */
  .showcase--pinned .panel--case {
    width: min(1240px, 88vw);
    height: min(calc(100vh - var(--header-h) - 116px), 800px);
  }
  .showcase--pinned .panel--case .panel__surface { padding: clamp(26px, 2.8vw, 42px); }

  /* Story on the left; the product takes the full height on the right */
  .showcase--pinned .case {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.25fr);
    grid-template-rows: 1fr auto;
    gap: 0 clamp(24px, 3vw, 48px);
    height: 100%;
  }
  .showcase--pinned .case__story { grid-column: 1; grid-row: 1; gap: 12px; min-height: 0; overflow-y: auto; }   /* never hide text */
  .showcase--pinned .case__close { grid-column: 1; grid-row: 2; }
  .showcase--pinned .case__title { font-size: clamp(2rem, 3.3vw, 3.4rem); }
  .showcase--pinned .case__fact { padding: 9px 0; font-size: 0.9rem; }
  .showcase--pinned .case__fact { grid-template-columns: 7.2rem 1fr; gap: 12px; }

  /* The product area. container-type lets the screens size themselves as a
     share of THIS area's height (cqh units), so the result is always the hero. */
  .showcase--pinned .case__stage {
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    /* three screens + a column of their own for the feedback card */
    /* minmax(0, …) lets columns be narrower than the screenshots inside them,
       so the screens can overlap instead of pushing the columns wider */
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.2fr) minmax(0, 0.75fr) minmax(0, 1.25fr);
    grid-template-rows: 1fr;
    grid-template-areas: "input result choose feedback";
    align-items: center;
    justify-items: center;
    gap: 0;
    min-height: 0;
    container-type: size;
    perspective: 1300px;
  }
  /* A soft pool of light behind the result */
  .showcase--pinned .case__stage::before {
    content: "";
    position: absolute;
    left: 34%;                   /* centred on the result screen's column */
    top: 46%;
    width: 62%;
    height: 85%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    pointer-events: none;
  }

  .showcase--pinned .screen { position: relative; transition: transform var(--dur) var(--ease); }
  .showcase--pinned .screen__img { width: auto; max-width: none; }

  /* THE HERO: the generated result, front and centre, biggest */
  .showcase--pinned .screen--result { z-index: 3; }
  .showcase--pinned .screen--result .screen__img { height: 82cqh; }

  /* The journey behind it: smaller, tucked underneath, turned slightly inwards */
  .showcase--pinned .screen--input .screen__img,
  .showcase--pinned .screen--choose .screen__img { height: 60cqh; }
  .showcase--pinned .screen--input  { z-index: 1; transform: translate(10%, 4cqh) rotateY(14deg); }
  .showcase--pinned .screen--choose { z-index: 1; transform: translate(-10%, 4cqh) rotateY(-14deg); }
  /* Labels sit on the outer side, where the result screen can't cover them */
  .showcase--pinned .screen--input .screen__label  { justify-self: start; margin-left: 10%; }
  .showcase--pinned .screen--choose .screen__label { justify-self: end; margin-right: 10%; }

  /* Shorter laptop screens: give the story more width and slightly tighter type */
  @media (max-height: 820px) {
    .showcase--pinned .case { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
    .showcase--pinned .case__story { gap: 8px; }
    .showcase--pinned .case__title { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
    .showcase--pinned .case__fact { padding: 6px 0; font-size: 0.82rem; line-height: 1.38; grid-template-columns: 6.6rem 1fr; }
    .showcase--pinned .case__fact dd { gap: 5px; }
    .showcase--pinned .case__phrase { font-size: 1.05rem; }
    .showcase--pinned .case__close { padding-top: 10px; }
    .showcase--pinned .case__close-line { font-size: 0.9rem; }
  }
  @media (max-height: 740px) {
    .showcase--pinned .case__story { gap: 6px; }
    .showcase--pinned .case__fact { padding: 5px 0; }
  }

  /* Subtle depth on hover: a back screen lifts a little */
  @media (hover: hover) {
    .showcase--pinned .screen--input:hover  { transform: translate(6%, 2cqh) rotateY(8deg); }
    .showcase--pinned .screen--choose:hover { transform: translate(-6%, 2cqh) rotateY(-8deg); }
  }

  /* Feedback: its own column at the right, low down, tucked over the back of the
     Choose screen only, so the result screen is never covered. Clearly secondary. */
  .showcase--pinned .feedback {
    grid-area: feedback;
    align-self: end;
    justify-self: stretch;
    z-index: 4;
    margin: 0 0 19cqh -18%;       /* bottom sits clear above the "2 Choose" label */
    padding: 12px;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 0 0 1px var(--glass-line), var(--float-shadow);
  }
  .showcase--pinned .feedback__quote { font-size: 0.8rem; }

  /* Arriving from the hero: the first panel rises gently into place, once */
  .showcase--pinned:not(.is-entered) .panel.is-active {
    transform: translate(-50%, -50%) translateY(48px) scale(0.96);
  }
}