/* ==========================================================================
   #s3 WEBSITES — "Websites worth showing off"
   Layout archetype: SPLIT, copy LEFT / device RIGHT (distinct from the s1
   full-bleed hero and the s2 centered cluster; sets up the s5 device-LEFT
   alternation later).
   Signature motion (ONE): the device PROVES responsiveness by morphing from a
   desktop browser to a phone as you scroll. A single scrubbed property
   (--rs 0 = desktop .. 1 = mobile) reshapes the frame AND reflows the same
   sample site (nav -> burger, hero two-col -> stacked, product row 3-up -> a
   single tall scroll). One continuous "same site, any screen" gesture.
   The frame is the only element whose box size animates; it is isolated inside
   a fixed-size stage (position:absolute + contain) so nothing else on the page
   reflows. Everything else is transform / opacity only. Full reduced-motion +
   no-JS resting mid-state below.
   ========================================================================== */

#s3 { overflow: clip; }

#s3 .s3-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

/* ---- LEFT: copy ---------------------------------------------------------- */
#s3 .s3-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-3);
}
#s3 .s3-eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
#s3 .s3-title {
  font-size: var(--fs-h2);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ice); text-wrap: balance;
}
#s3 .s3-title .accent { color: var(--gold-bright); font-style: italic; font-weight: 500; }
#s3 .s3-lead {
  margin-top: var(--sp-3);
  max-width: 46ch;
  color: var(--parchment-dim);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

#s3 .s3-feats {
  list-style: none;
  margin-top: var(--sp-4);
  display: flex; flex-direction: column; gap: 14px;
}
#s3 .s3-feats li {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  color: var(--ice);
  line-height: 1.4;
}
#s3 .s3-feats__ic {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(196,162,101,0.10);
  border: 1px solid rgba(196,162,101,0.28);
}
#s3 .s3-feats__ic svg { width: 15px; height: 15px; }

/* the small "desktop -> mobile" cue line; its dot tracks the morph (--rs) */
#s3 .s3-cue {
  margin-top: var(--sp-5);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--steel);
}
#s3 .s3-cue__track {
  position: relative; width: 64px; height: 2px; border-radius: 999px;
  background: var(--hairline); overflow: visible;
}
#s3 .s3-cue__dot {
  position: absolute; top: 50%; left: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(196,162,101,0.7);
  transform: translate(calc(var(--rs, 0) * 56px), -50%);
  will-change: transform;
}
#s3 .s3-cue__from, #s3 .s3-cue__to { transition: color var(--t-base); }
#s3 .s3-cue__arrow { color: var(--gold-soft); }
#s3 .s3-cue__from { color: var(--gold-bright); }
#s3 .s3-cue.is-mobile .s3-cue__from { color: var(--steel); }
#s3 .s3-cue.is-mobile .s3-cue__to { color: var(--gold-bright); }

/* ---- RIGHT: the morphing device ----------------------------------------- */
/* The stage is a fixed-size box; the frame inside is absolutely positioned and
   centred, so only the frame's own size changes (no page reflow). */
#s3 .s3-stage {
  position: relative;
  width: 100%;
  /* tall enough to hold both the wide desktop frame and the tall phone */
  height: clamp(420px, 46vw, 560px);
  display: grid; place-items: center;
}
/* warm pool of light behind the device, anchoring it to the page palette */
#s3 .s3-stage::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 78%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(196,162,101,0.12) 0%, rgba(168,200,224,0.05) 42%, transparent 72%);
  filter: blur(12px);
  pointer-events: none; z-index: 0;
}

#s3 .s3-device {
  --rs: 0;                  /* 0 desktop .. 1 mobile (JS scrubs; default desktop) */
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 100%; height: 100%;
}

/* The frame: width + radius interpolate with --rs. Isolated layout (absolute,
   contain) so its size change never reflows the page. */
#s3 .s3-frame {
  position: absolute;
  /* desktop ~540px wide / ~360px tall  ->  phone ~250px wide / ~470px tall.
     Both width AND height interpolate so the frame box itself reshapes; the
     viewport clips, so the reflowing site never spills past the frame. */
  width: calc(540px - var(--rs) * 290px);
  height: calc(440px + var(--rs) * 90px);
  border-radius: calc(18px + var(--rs) * 14px);
  background: #fff;
  border: 1px solid rgba(168,200,224,0.18);
  box-shadow: 0 36px 80px -30px rgba(0,0,0,0.78),
              0 6px 22px -10px rgba(0,0,0,0.5),
              0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  /* contain bounds the morph's reflow to this subtree so the page never reflows.
     NOTE: width/height animate here on purpose (the responsive-morph signature);
     we do NOT will-change them — will-change on layout props can't be GPU-promoted
     and just costs memory. Transitions are kept short so the scroll scrub drives
     the morph rather than queuing a long competing relayout tween each frame. */
  transition: width .18s linear, height .18s linear, border-radius .18s linear;
}

/* chrome: a browser bar (desktop) that fades to a phone notch (mobile) */
#s3 .s3-chrome {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  height: calc(34px - var(--rs) * 14px);
  padding: 0 calc(12px - var(--rs) * 6px);
  background: #14171D;
  border-bottom: 1px solid rgba(168,200,224,0.08);
  transition: height .18s linear, padding .18s linear;
}
#s3 .s3-chrome__dots { display: flex; gap: 6px; opacity: calc(1 - var(--rs) * 1.6); transition: opacity .4s; }
#s3 .s3-chrome__dots i { width: 9px; height: 9px; border-radius: 50%; background: #2C313A; display: block; }
#s3 .s3-chrome__bar {
  flex: 1; height: 20px; border-radius: 6px;
  background: #0C0E13; border: 1px solid rgba(168,200,224,0.08);
  display: flex; align-items: center; padding: 0 11px;
  font-family: var(--font-mono); font-size: 10px; color: var(--steel);
  letter-spacing: 0.4px; white-space: nowrap; overflow: hidden;
  opacity: calc(1 - var(--rs) * 1.6); transition: opacity .4s;
}
/* phone notch: fades in as --rs -> 1, sits centred over the chrome */
#s3 .s3-chrome__notch {
  position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  width: 74px; height: 13px; border-radius: 999px;
  background: #05060A;
  opacity: var(--rs);
  transition: opacity .4s;
}

#s3 .s3-viewport {
  background: var(--bg-deep);
  /* screen content fills the box directly: no chrome bar, no top gap */
  height: 100%;
  overflow: hidden;
}

/* ---- The sample site (reflows with --rs) -------------------------------- */
#s3 .s3-site {
  --pad: calc(16px - var(--rs) * 4px);
  height: 100%;
  padding: var(--pad);
  display: flex; flex-direction: column;
  gap: calc(14px - var(--rs) * 3px);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(168,200,224,0.05), transparent 70%),
    var(--bg-deep);
  transition: gap .18s linear;
}
/* the site is a fixed-height flex column: header + row are fixed, the hero
   flexes to fill whatever is left, so both desktop and mobile compose cleanly
   with the product row always pinned in view (no clipping). */
#s3 .s3-site__head { flex: none; }
#s3 .s3-site__hero { flex: 1 1 0; min-height: 0; overflow: hidden; }
#s3 .s3-site__row  { flex: none; }

/* site header: nav fades out, burger fades in, layout tightens */
#s3 .s3-site__head {
  display: flex; align-items: center; gap: 10px;
}
#s3 .s3-site__brand {
  font-family: var(--font-serif); font-weight: 700;
  font-size: calc(15px - var(--rs) * 1px); color: var(--ice);
  line-height: 1; display: flex; flex-direction: column;
  letter-spacing: -0.01em;
}
#s3 .s3-site__brand i {
  font-style: normal; font-family: var(--font-mono);
  font-size: 7px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-soft); margin-top: 3px;
}
#s3 .s3-site__nav {
  margin-left: auto; display: flex; gap: 16px;
  opacity: calc(1 - var(--rs) * 2);
  transform: translateX(calc(var(--rs) * 10px));
  transition: opacity .35s, transform .5s var(--ease-out);
}
#s3 .s3-site__nav span {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--parchment-dim); white-space: nowrap;
}
#s3 .s3-site__cta {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--bg-deep);
  background: var(--gold-bright); border-radius: 999px;
  padding: 6px 12px; white-space: nowrap;
  /* on mobile the CTA drops out of the bar (burger takes over) */
  opacity: calc(1 - var(--rs) * 2);
  order: 2;
  transition: opacity .35s;
}
#s3 .s3-site__burger {
  margin-left: auto; order: 3;
  display: flex; flex-direction: column; gap: 3.5px;
  opacity: var(--rs); transition: opacity .4s;
  pointer-events: none;
  /* burger overlaps the (faded) nav/cta slot on the right */
  width: 0; overflow: visible;
}
#s3 .s3-site__burger i {
  width: 18px; height: 2px; border-radius: 2px; background: var(--ice);
  margin-left: -18px;
}

/* hero band: two-column -> stacked */
#s3 .s3-site__hero {
  display: grid;
  grid-template-columns: calc(1.4fr) calc(1fr - var(--rs) * 1fr);
  gap: calc(16px - var(--rs) * 6px);
  align-items: center;
  border-radius: 12px;
  padding: calc(16px - var(--rs) * 4px);
  background:
    linear-gradient(135deg, rgba(196,162,101,0.10), rgba(168,200,224,0.04));
  border: 1px solid var(--hairline-soft);
  transition: grid-template-columns .18s linear, gap .18s linear, padding .18s linear;
}
#s3 .s3-site__hero-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#s3 .s3-site__kicker {
  font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--gold-soft);
}
#s3 .s3-site__h {
  font-family: var(--font-serif); font-weight: 600;
  font-size: calc(20px - var(--rs) * 3px); line-height: 1.12; color: var(--ice);
  letter-spacing: -0.01em; transition: font-size .18s linear;
}
#s3 .s3-site__p {
  font-family: var(--font-serif); font-size: 10px; line-height: 1.45;
  color: var(--parchment-dim); max-width: 34ch;
}
#s3 .s3-site__btns { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
#s3 .s3-site__btn {
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ice);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 11px;
  white-space: nowrap;
}
#s3 .s3-site__btn--gold {
  background: var(--gold-bright); color: var(--bg-deep); border-color: transparent;
}

/* hero art: a stylised coffee cup; shrinks/fades as the column collapses */
#s3 .s3-site__hero-art {
  position: relative; align-self: stretch;
  min-height: 78px; border-radius: 10px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(196,162,101,0.30), transparent 60%),
    linear-gradient(160deg, #1A1410, #0A0C10);
  display: grid; place-items: center;
  opacity: calc(1 - var(--rs) * 1.25);
  transition: opacity .45s;
}
#s3 .s3-site__cup {
  width: 46px; height: 40px; border-radius: 0 0 14px 14px;
  border: 2px solid var(--gold-bright); border-top: none;
  position: relative;
  box-shadow: inset 0 6px 0 -2px rgba(196,162,101,0.5);
}
#s3 .s3-site__cup::before {
  content: ""; position: absolute; right: -13px; top: 6px;
  width: 14px; height: 16px; border: 2px solid var(--gold-bright);
  border-left: none; border-radius: 0 10px 10px 0;
}
#s3 .s3-site__cup::after {
  content: ""; position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
  width: 2px; height: 8px; background: rgba(168,200,224,0.5);
  border-radius: 2px;
  box-shadow: 6px 1px 0 rgba(168,200,224,0.5), -6px 1px 0 rgba(168,200,224,0.5);
}

/* product row: 3-up -> 3 across but tighter; cards keep their thumbnails.
   On mobile the row stays a 3-column grid but the cards shrink, proving the
   shop still works small. */
#s3 .s3-site__row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: calc(10px - var(--rs) * 3px);
  transition: gap .18s linear;
}
#s3 .s3-site__card {
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
#s3 .s3-site__thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 6px;
  background: linear-gradient(160deg, #1A1410, #0A0C10);
}
#s3 .s3-thumb--a { background: linear-gradient(150deg, #3A2A18, #120D08); }
#s3 .s3-thumb--b { background: linear-gradient(150deg, #2A2418, #0E0D08); }
#s3 .s3-thumb--c { background: linear-gradient(150deg, #1A2228, #080C10); }
#s3 .s3-site__cardname {
  font-family: var(--font-serif); font-size: 9px; font-weight: 600;
  color: var(--ice); line-height: 1.1;
}
#s3 .s3-site__price {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  color: var(--gold-bright); font-variant-numeric: tabular-nums;
}

/* ---- Responsive (page layout, NOT the device morph) --------------------- */
@media (max-width: 860px) {
  #s3 .s3-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vh, 48px);
    text-align: center;
  }
  #s3 .s3-eyebrow { justify-content: center; }
  #s3 .s3-eyebrow::after {
    content: ""; width: 26px; height: 1px;
    background: linear-gradient(90deg, var(--gold-soft), transparent);
  }
  #s3 .s3-lead { margin-inline: auto; }
  #s3 .s3-feats { align-items: center; max-width: 360px; margin-inline: auto; }
  #s3 .s3-feats li { text-align: left; }
  #s3 .s3-cue { justify-content: center; }
  #s3 .s3-stage { height: clamp(420px, 86vw, 520px); }
}

/* On small screens the desktop-state frame must still fit the stage width.
   Interpolate between ~96% of the stage (desktop) and a phone width (mobile),
   so the morph plays without the frame overflowing the viewport. */
@media (max-width: 600px) {
  #s3 .s3-frame {
    width: calc(96% - var(--rs) * (96% - 232px));
    height: calc(420px + var(--rs) * 96px);
  }
  #s3 .s3-stage { height: clamp(440px, 132vw, 540px); }
}

/* ---- Reduced motion / no-JS: rest at a readable DESKTOP state.
   The frame sits desktop-wide with the full site laid out (no morph), so the
   "beautiful website" still lands as a static composition. The desktop/mobile
   cue is purely about the animation, so we hide it. ------------------------ */
@media (prefers-reduced-motion: reduce) {
  #s3 .s3-frame { transition: none !important; }
  #s3 .s3-site, #s3 .s3-site__hero,
  #s3 .s3-site__nav, #s3 .s3-site__cta, #s3 .s3-site__h,
  #s3 .s3-site__row, #s3 .s3-site__hero-art, #s3 .s3-site__cta,
  #s3 .s3-cue__dot { transition: none !important; }
  #s3 .s3-cue { display: none; }
}

/* ==========================================================================
   FELLFOOT STAYS brand skin for the s3 mock site.
   The section's morph (frame reshape + reflow, all --rs driven) is untouched;
   this block only RE-COLOURS the site that lives inside the frame from the dark
   placeholder palette to the Fellfoot Stays light/editorial brand (mb--fellfoot),
   and swaps the gradient art for real Unsplash WebP imagery (fells/cabins/
   interior). Everything still animates via --rs only. Scoped under #s3 .mb so it
   cannot leak to the dark page chrome.
   ========================================================================== */

/* the site "page" itself: light stone-paper background, brand text */
#s3 .s3-site.mb--fellfoot {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(47,93,69,0.06), transparent 70%),
    var(--mb-bg);
}

/* header: editorial wordmark; stacked logo tightens as it shrinks */
#s3 .mb--fellfoot .s3-site__brand {
  font-size: calc(15px - var(--rs) * 1px);
  gap: 2px;
  color: var(--mb-accent);   /* forest green wordmark, beats base --ice */
}
#s3 .mb--fellfoot .s3-site__brand .mb-logo__tag {
  font-size: 6px; letter-spacing: 2px; margin-top: 1px;
}
#s3 .mb--fellfoot .s3-site__nav span { color: var(--mb-text-soft); }
#s3 .mb--fellfoot .s3-site__cta {
  background: var(--mb-accent); color: var(--mb-on-accent);
}
#s3 .mb--fellfoot .s3-site__burger i { background: var(--mb-text); }

/* hero band: forest/stone editorial card. A robust 2-col layout (copy + photo)
   that collapses to a single stacked column as --rs -> 1 (photo column width
   tracks --rs). Avoids the fragile calc(fr - rs*fr) of the base rule so the
   photographic hero reliably shows on desktop. */
#s3 .mb--fellfoot .s3-site__hero {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  box-shadow: var(--mb-shadow);
  grid-template-columns:
    minmax(0, 1fr)
    min(46%, calc((1 - var(--rs)) * 240px));
}
/* below the page's mobile breakpoint the art column is hidden anyway; keep the
   morph as the single source of truth for the in-frame reflow. */
#s3 .mb--fellfoot .s3-site__kicker { color: var(--mb-accent); }
#s3 .mb--fellfoot .s3-site__h {
  font-family: var(--mb-font-head); color: var(--mb-text);
}
#s3 .mb--fellfoot .s3-site__p {
  font-family: var(--mb-font-body); color: var(--mb-text-soft);
}
#s3 .mb--fellfoot .s3-site__btn {
  font-family: var(--mb-font-body); text-transform: none;
  letter-spacing: 0; font-size: 8.5px;
  color: var(--mb-text); border: 1px solid var(--mb-line);
  background: var(--mb-surface);
}
#s3 .mb--fellfoot .s3-site__btn--gold {
  background: var(--mb-accent); color: var(--mb-on-accent);
  border-color: transparent;
}

/* hero art: real fells/lake photo instead of the gradient coffee cup.
   Fades/collapses with --rs exactly like the original art did. */
#s3 .mb--fellfoot .s3-site__hero-art {
  background: var(--mb-surface-2) url("./img/fellfoot-hero.webp") center/cover no-repeat;
  border: 1px solid var(--mb-line);
  min-height: 0;            /* let it stretch to the card height instead of 78px */
  align-self: stretch;
  border-radius: 8px;
}

/* unit cards: light surfaces, photographic thumbnails */
#s3 .mb--fellfoot .s3-site__card {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
}
#s3 .mb--fellfoot .s3-site__cardname {
  font-family: var(--mb-font-head); color: var(--mb-text);
}
#s3 .mb--fellfoot .s3-site__price {
  font-family: var(--mb-font-num); color: var(--mb-accent);
  display: flex; align-items: baseline; gap: 2px;
}
#s3 .mb--fellfoot .s3-site__price small {
  font-size: 6.5px; font-weight: 500; color: var(--mb-text-soft);
}
#s3 .mb--fellfoot .s3-site__thumb {
  background-size: cover; background-position: center;
}
#s3 .s3-thumb--cabin1   { background-image: url("./img/fellfoot-cabin1.webp"); }
#s3 .s3-thumb--cabin2   { background-image: url("./img/fellfoot-cabin2.webp"); }
#s3 .s3-thumb--interior { background-image: url("./img/fellfoot-interior.webp"); }