/* ===========================================================
   Common Ground Pilates — Studio Chooser overlay
   studio-chooser.css

   A premium GSAP Flip transition: the real #fanStage lifts from
   its hero position, flies to screen center, grows + spreads into
   a selectable hand of four, while a cream frosted veil fades up
   and the question streams in word-by-word above.
   Palette + type inherit from site.css (terracotta / cream,
   Marcellus + PT Serif).
   =========================================================== */

/* scroll lock while open */
html.sc-lock, html.sc-lock body { overflow: hidden; }

.sc-overlay{
  position:fixed; inset:0; z-index:200; display:none;
}

/* --- the frosted veil: warm cream, blurred, with a soft center vignette
   so the colored blob atmosphere behind reads as a glow, not noise --- */
.sc-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(125% 120% at 50% 36%,
      rgba(244,239,230,.55) 0%,
      rgba(240,232,219,.80) 52%,
      rgba(226,213,194,.93) 100%);
  backdrop-filter:blur(20px) saturate(1.18);
  -webkit-backdrop-filter:blur(20px) saturate(1.18);
}
/* a hairline of warmth at the very edges to frame the composition */
.sc-veil::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 200px 40px rgba(166,74,58,.07);
  pointer-events:none;
}

/* kicker + heading sit in the upper band; the fan flies to ~57.5% height
   (positioned by JS as a fixed element), so the text clears it. */
.sc-inner{
  position:relative; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  gap:clamp(12px,2vh,22px);
  padding:clamp(54px,11vh,120px) clamp(20px,5vw,80px) 0;
  text-align:center; pointer-events:none;
}
.sc-inner .sc-kicker, .sc-inner .sc-heading{ pointer-events:auto; }

/* --- eyebrow --- */
.sc-kicker{
  display:flex; align-items:center; gap:10px;
  font-size:clamp(10.5px,.9vw,13px); letter-spacing:.32em;
  text-transform:uppercase; color:var(--accent); font-weight:500;
}
.sc-kicker .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); display:inline-block;
}

/* --- the question --- */
.sc-heading{
  font-family:"Marcellus",Georgia,serif; font-weight:400;
  line-height:1.06; text-align:center; color:var(--ink);
  /* one line — sized to fit the longest question on a single row */
  font-size:clamp(22px,3.4vw,46px);
  max-width:none; white-space:nowrap; letter-spacing:.004em; margin:0;
}
/* word-mask wrappers for the stream-in */
.sc-heading .w{
  display:inline-block; overflow:hidden;
  vertical-align:top; padding:0 .02em .1em;
}
.sc-heading .wi{ display:inline-block; }
.sc-heading .accent{ font-style:italic; color:var(--accent); }

/* --- close --- */
.sc-close{
  position:absolute; top:clamp(18px,3vh,34px); right:clamp(18px,3vw,40px);
  z-index:3; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(28,26,23,.22); background:rgba(244,239,230,.55);
  color:var(--ink); font:400 24px/1 "Marcellus",Georgia,serif; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.22,.9,.25,1);
}
.sc-close:hover{
  background:var(--accent); border-color:var(--accent); color:var(--paper);
  transform:rotate(90deg);
}

/* ===========================================================
   THE FAN, RELOCATED — .in-chooser is applied to #fanStage once
   it's inside the overlay. Bigger cards, an open hand, clean hover.
   Flip interpolates every card's rect from the hero fan into this.
   =========================================================== */
/* While in the overlay the fan keeps its EXACT hero formation and size — the
   rigid flight (a single transform on #fanStage, set by JS) grows + centers the
   whole unit, so there is no per-card snap. Only the deeper shadow changes. */
.fan-stage.in-chooser .fan-card{
  box-shadow:0 30px 72px -28px rgba(28,26,23,.55);
}
/* the chooser has room to show the address line the hero fan hides */
.fan-stage.in-chooser .fan-card .meta .code{
  display:block; font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:5px;
}
.fan-stage.in-chooser .fan-card .meta .enter{ color:var(--accent); }

/* ---- .sc-spread: added AFTER the fan lands. The hand opens into four clear,
   separated choices. The base .fan-card transition (transform .55s) animates
   this, fully decoupled from the GSAP flight above. ---- */
.fan-stage.in-chooser.sc-spread .fan-card.c1{ transform:translateX(-118%) translateY(6px)  rotate(-7deg); z-index:6; }
.fan-stage.in-chooser.sc-spread .fan-card.c2{ transform:translateX(-39%)  translateY(-6px) rotate(-2.4deg); z-index:7; }
.fan-stage.in-chooser.sc-spread .fan-card.c3{ transform:translateX(39%)   translateY(-6px) rotate(2.4deg);  z-index:8; }
.fan-stage.in-chooser.sc-spread .fan-card.c4{ transform:translateX(118%)  translateY(6px)  rotate(7deg);   z-index:9; }

/* per-card hover — preserves each card's spread offset, lifts + straightens it
   forward (can't use a generic :hover; transform would wipe the offset) */
.fan-stage.in-chooser.sc-spread .fan-card.c1:hover{ transform:translateX(-118%) translateY(-16px) rotate(-4deg) scale(1.05) !important; z-index:20; box-shadow:0 50px 96px -30px rgba(28,26,23,.6); }
.fan-stage.in-chooser.sc-spread .fan-card.c2:hover{ transform:translateX(-39%)  translateY(-22px) rotate(-1deg) scale(1.05) !important; z-index:20; box-shadow:0 50px 96px -30px rgba(28,26,23,.6); }
.fan-stage.in-chooser.sc-spread .fan-card.c3:hover{ transform:translateX(39%)   translateY(-22px) rotate(1deg)  scale(1.05) !important; z-index:20; box-shadow:0 50px 96px -30px rgba(28,26,23,.6); }
.fan-stage.in-chooser.sc-spread .fan-card.c4:hover{ transform:translateX(118%)  translateY(-16px) rotate(4deg)  scale(1.05) !important; z-index:20; box-shadow:0 50px 96px -30px rgba(28,26,23,.6); }
.fan-stage.in-chooser.sc-spread .fan-card:hover .photo img{ transform:scale(1.07); }

/* ---------- responsive: tighten the open hand on narrower viewports ---------- */
@media (max-width:1080px){
  .fan-stage.in-chooser.sc-spread .fan-card.c1{ transform:translateX(-104%) translateY(6px)  rotate(-6deg); }
  .fan-stage.in-chooser.sc-spread .fan-card.c2{ transform:translateX(-35%)  translateY(-5px) rotate(-2deg); }
  .fan-stage.in-chooser.sc-spread .fan-card.c3{ transform:translateX(35%)   translateY(-5px) rotate(2deg); }
  .fan-stage.in-chooser.sc-spread .fan-card.c4{ transform:translateX(104%)  translateY(6px)  rotate(6deg); }
}
@media (max-width:1080px){
  .sc-heading{ font-size:clamp(22px,6vw,32px); white-space:normal; max-width:20ch; }
}
/* ≤1080px: the fullscreen flight fan spreads wider than the viewport (it clips),
   so studio-chooser.js skips the pin/flight (see MOBILE branch) and we lay the
   relocated #fanStage out as a scrollable 2-col grid centered in the overlay.
   At ≥1081px the flight has room to spread, so the fan returns. */
@media (max-width:1080px){
  .sc-overlay{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .sc-veil{ position:fixed; }
  .sc-close{ position:fixed; }
  .sc-inner{ height:auto; min-height:0; padding:78px 0 6px; }

  .fan-stage.in-chooser,
  .fan-stage.in-chooser.sc-spread{
    /* relative + z-index, NOT static: the fixed .sc-veil is a positioned
       sibling and would otherwise paint above (and swallow taps on) the cards */
    position:relative !important;z-index:3;left:auto !important;top:auto !important;
    width:auto !important;height:auto !important;transform:none !important;margin:14px auto 34px;
    display:grid;grid-template-columns:1fr 1fr;gap:14px;
    max-width:520px;padding:0 clamp(16px,5vw,24px);place-items:stretch;
  }
  .fan-stage.in-chooser .fan-card,
  .fan-stage.in-chooser.sc-spread .fan-card.c1,
  .fan-stage.in-chooser.sc-spread .fan-card.c2,
  .fan-stage.in-chooser.sc-spread .fan-card.c3,
  .fan-stage.in-chooser.sc-spread .fan-card.c4{
    position:relative !important;transform:none !important;rotate:0deg !important;
    width:100%;aspect-ratio:5/7;z-index:auto;
    box-shadow:0 14px 34px -18px rgba(28,26,23,.5);
  }
  /* grid mode: hover just lifts + scales the card in place (popup-style),
     overlapping neighbors via z-index — NOT the fan fly-off, which in grid
     aspect chases the cursor off its position. */
  .fan-stage.in-chooser .fan-card:hover,
  .fan-stage.in-chooser.sc-spread .fan-card.c1:hover,
  .fan-stage.in-chooser.sc-spread .fan-card.c2:hover,
  .fan-stage.in-chooser.sc-spread .fan-card.c3:hover,
  .fan-stage.in-chooser.sc-spread .fan-card.c4:hover{
    transform:translateY(-4px) scale(1.045) !important;rotate:0deg !important;
    z-index:6;box-shadow:0 26px 54px -24px rgba(28,26,23,.55);
  }
}

@media (prefers-reduced-motion:reduce){
  .sc-close{ transition:none; }
}