/* wp-content/plugins/notts-osteo-elements/assets/css/anatomy-scroll.css
 *
 * Styles for the Anatomy Scroll widget. No raw colours — everything resolves against
 * tokens.css or the custom properties Elementor writes onto the wrapper.
 *
 * The scene is exactly one screen tall and self-contained. The sequence is stepped by the
 * script rather than by scrolling the document, so it consumes no page height, covers
 * nothing above or below it, and leaves the page short enough to return to the top in one
 * flick. Nothing here is fixed or sticky.
 *
 * Author: Sean Burn
 */

/* Elementor's widget wrapper is a flex item inside the container. Left to itself it is
   sized shrink-to-fit, so a percentage width below it resolves against that shrunken box
   rather than the container — the scene came out around 80% of the screen. This never
   showed while the stage was fixed to the window, because nothing in the scene depended on
   the widget's own box; making the scene self-contained is what exposed it. */
.elementor-widget-nosteo-anatomy-scroll,
.elementor-widget-nosteo-anatomy-scroll > .elementor-widget-container {
  width: 100%;
}

.nosteo-anatomy {
  position: relative;
  width: 100%;
  font-family: var(--nosteo-font);
  color: var(--nosteo-ink);
}

/* Exactly one screen. The sequence does not consume page scroll at all — the script steps
   the beats internally — so the document is no longer than the scene plus whatever follows
   it. That is what makes getting back to the top a single flick instead of six screens of
   climbing, and it is why nothing here is fixed or sticky any more.
   Width is stated explicitly: the stage used to be fixed to the window, so the widget's own
   width never mattered, and it turned out not to be filling its container. */
.nosteo-anatomy__viewport {
  position: relative;
  width: 100%;
  /* Sits below the fixed site header rather than behind it, so the figure is never clipped.
     --nosteo-header-h is published by the site navigation and falls back to 0 on a page
     with no header widget. */
  height: calc(100vh - var(--nosteo-header-h, 0px));
  height: calc(100svh - var(--nosteo-header-h, 0px));
  overflow: hidden;
  /* The positioning context for every layer below — they are all absolute against this box,
     which is why the script can work in one coordinate space instead of screen space. */
}

.nosteo-anatomy__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(58% 46% at 42% 44%, var(--nosteo-ground-pool) 0%, transparent 68%),
    linear-gradient(180deg, var(--nosteo-ground) 0%, var(--nosteo-ground-deep) 100%);
}

.nosteo-anatomy__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.nosteo-anatomy__leaders {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.nosteo-anatomy__poster {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--nosteo-ground);
  display: grid;
  place-items: center;
  transition: opacity 700ms var(--nosteo-ease);
}
.nosteo-anatomy__poster.is-gone {
  opacity: 0;
  pointer-events: none;
}
.nosteo-anatomy__poster span {
  font-family: var(--nosteo-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nosteo-muted);
}

/* ---------- opening ---------- */

.nosteo-anatomy__hero {
  position: absolute;
  z-index: 12;
  /* On the site gutter, so the headline lines up with the logo in the header above. */
  left: var(--nosteo-site-pad);
  bottom: clamp(96px, 15vh, 152px);
  /* px/vw, not ch: a ch value resolves against this wrapper's inherited size, not the
     heading's, which squeezes the h1 to one word per line on a wide screen. */
  max-width: min(46vw, 620px);
  transition: opacity 400ms var(--nosteo-ease), transform 400ms var(--nosteo-ease);
}
.nosteo-anatomy__hero-eyebrow {
  font-family: var(--nosteo-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nosteo-muted);
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--nosteo-hair);
}
.nosteo-anatomy__hero-heading {
  margin: 0 0 18px;
  max-width: 15ch;      /* correct here — resolves against this element's own size */
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}
.nosteo-anatomy__hero-text {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6;
  color: var(--nosteo-muted);
  max-width: 32ch;
}

/* ---------- callouts ---------- */

.nosteo-anatomy__anno {
  position: absolute;
  z-index: 12;
  width: min(330px, 38vw);
  background: var(--nosteo-box-bg);
  /* Both of these are Elementor-controlled; the tokens are only the starting point. */
  padding: var(--nosteo-box-padding);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.nosteo-anatomy--border-left .nosteo-anatomy__anno   { border-left:   var(--nosteo-box-border-width) solid var(--nosteo-box-border-colour); }
.nosteo-anatomy--border-right .nosteo-anatomy__anno  { border-right:  var(--nosteo-box-border-width) solid var(--nosteo-box-border-colour); }
.nosteo-anatomy--border-top .nosteo-anatomy__anno    { border-top:    var(--nosteo-box-border-width) solid var(--nosteo-box-border-colour); }
.nosteo-anatomy--border-bottom .nosteo-anatomy__anno { border-bottom: var(--nosteo-box-border-width) solid var(--nosteo-box-border-colour); }

.nosteo-anatomy__anno-rule {
  height: 1px;
  background: var(--nosteo-ink);
  transform-origin: left center;
  margin-bottom: 14px;
}
.nosteo-anatomy__anno-label {
  font-family: var(--nosteo-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nosteo-signal);
  margin: 0 0 10px;
}
.nosteo-anatomy__anno-title {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
}
.nosteo-anatomy__anno-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.58;
  color: var(--nosteo-muted);
}
.nosteo-anatomy__anno-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-family: var(--nosteo-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nosteo-muted);
}
.nosteo-anatomy__anno-meta span { position: relative; }
.nosteo-anatomy__anno-meta span + span { padding-left: 15px; }
.nosteo-anatomy__anno-meta span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 1px;
  background: var(--nosteo-hair);
}

/* ---------- closing ---------- */

.nosteo-anatomy__closing {
  position: absolute;
  z-index: 14;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
}
.nosteo-anatomy__closing-heading {
  margin: 0 0 18px;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-wrap: balance;
}
.nosteo-anatomy__closing-text {
  margin: 0 auto 30px;
  max-width: 44ch;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--nosteo-muted);
}

.nosteo-anatomy__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;         /* tap target floor */
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--nosteo-resolve);
  color: var(--nosteo-on-resolve);
  font: 600 14px/1 var(--nosteo-font);
  text-decoration: none;
  cursor: pointer;
  transition: filter 200ms var(--nosteo-ease), transform 200ms var(--nosteo-ease);
}
/* Colour restated: the theme reset's `a:active, a:hover { color: #336 }` outranks the
   (0,1,0) base rule above and would turn this label navy on the closing beat. */
.nosteo-anatomy__cta:hover { filter: brightness(1.06); color: var(--nosteo-on-resolve); }
.nosteo-anatomy__cta:active { transform: translateY(1px); color: var(--nosteo-on-resolve); }
.nosteo-anatomy__cta:focus-visible { outline: 2px solid var(--nosteo-ink); outline-offset: 3px; }

/* ---------- replay ----------

   This began as an admin-only tool in the corner, because the sequence is skipped for a day
   once it has been watched and that makes it awkward to work on. Enough visitors asked to
   see it again that it belongs to them now: same job, under the call to action, where a
   returning visitor already is.

   Deliberately not a second pill. Booking is the one thing this beat asks for, and two
   solid buttons stacked would split that ask in half — this reads as an aside to it, which
   is what it is. Block level so it takes its own line under the button; fit-content so the
   auto margins still centre it in the panel. */
/* Every rule below is prefixed with `.nosteo-anatomy`, and it is load-bearing rather than
   tidiness. The theme reset styles bare buttons as pink outlined pills:

     [type=button], button              { border: 1px solid #c36; color: #c36; padding: .5rem 1rem }
     [type=button]:hover, button:hover  { background-color: #c36; color: #fff }

   `[type=button]` is (0,1,0) and `[type=button]:hover` is (0,2,0) — attribute selectors and
   pseudo-classes both count in the class column — so a single class ties the first and LOSES
   the second, leaving whichever stylesheet loads last to decide. The extra class puts these
   at (0,2,0) and (0,3,0) and takes load order out of it. The background is restated on hover
   for the same reason: without it the reset's `background-color: #c36` still lands. */
.nosteo-anatomy .nosteo-anatomy__replay {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  /* Padding, not min-height: the box has to be a comfortable tap target without pushing the
     label away from the button it sits under. 13 + 10 + 10 clears 44px on its own. */
  margin: 14px auto 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--nosteo-muted);
  font: var(--nosteo-weight-medium) 13px/1 var(--nosteo-font);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  /* Named, not `all`: the reset's `transition: all .3s` would sweep up the icon's rotation
     and run it at someone else's duration. */
  transition: color 200ms var(--nosteo-ease);
}

.nosteo-anatomy .nosteo-anatomy__replay svg {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.7;
  /* The one flourish on this beat: the arrow travels the circle it is drawn on. Anti-
     clockwise, and slow enough to read as winding back rather than as a spinner. */
  transition: transform 640ms var(--nosteo-ease), opacity 200ms var(--nosteo-ease);
}

.nosteo-anatomy .nosteo-anatomy__replay:hover,
.nosteo-anatomy .nosteo-anatomy__replay:focus-visible {
  background: none;
  color: var(--nosteo-ink);
}
.nosteo-anatomy .nosteo-anatomy__replay:hover svg,
.nosteo-anatomy .nosteo-anatomy__replay:focus-visible svg { transform: rotate(-360deg); opacity: 1; }
.nosteo-anatomy .nosteo-anatomy__replay:focus-visible {
  outline: 2px solid var(--nosteo-ink);
  outline-offset: 2px;
}

/* Nothing to replay. `is-static` is reduced motion or the animation switched off, and both
   are a single held frame — offering to play it again would be offering nothing. */
.nosteo-anatomy.is-static .nosteo-anatomy__replay { display: none; }

/* ---------- the rewind ----------
   Every value the scene draws comes from two numbers, so putting those back where they
   started is the whole rewind — and it happens in one frame. Behind a fade that reads as a
   decision; without one, as a glitch. */
.nosteo-anatomy__viewport { transition: opacity 260ms var(--nosteo-ease); }
.nosteo-anatomy.is-rewinding .nosteo-anatomy__viewport { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .nosteo-anatomy__viewport { transition: none; }
}

/* ---------- jump links ----------
   Revealed when the sequence finishes. Same surface as the callouts, so they read as the
   same family of object — the areas you were just shown, now as somewhere to go. */

.nosteo-anatomy__jump {
  position: absolute;
  z-index: 16;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--nosteo-site-pad) calc(24px + env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 500ms var(--nosteo-ease), transform 500ms var(--nosteo-ease);
}
.nosteo-anatomy.is-complete .nosteo-anatomy__jump {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nosteo-anatomy__jump ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: var(--nosteo-site-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nosteo-anatomy__jump a {
  display: block;
  padding: 12px 20px;
  background: var(--nosteo-box-bg);
  color: var(--nosteo-ink);
  font-size: 15px;
  font-weight: var(--nosteo-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms var(--nosteo-ease), color 180ms var(--nosteo-ease);
}
.nosteo-anatomy--border-left .nosteo-anatomy__jump a   { border-left:   var(--nosteo-box-border-width) solid var(--nosteo-box-border-colour); }
.nosteo-anatomy--border-right .nosteo-anatomy__jump a  { border-right:  var(--nosteo-box-border-width) solid var(--nosteo-box-border-colour); }
.nosteo-anatomy--border-top .nosteo-anatomy__jump a    { border-top:    var(--nosteo-box-border-width) solid var(--nosteo-box-border-colour); }
.nosteo-anatomy--border-bottom .nosteo-anatomy__jump a { border-bottom: var(--nosteo-box-border-width) solid var(--nosteo-box-border-colour); }

.nosteo-anatomy__jump a:hover {
  background: var(--nosteo-resolve);
  color: var(--nosteo-on-resolve);
}
.nosteo-anatomy__jump a:focus-visible {
  outline: 2px solid var(--nosteo-resolve);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  /* One row that scrolls sideways beats eight wrapping onto four lines and burying the
     closing call to action. */
  .nosteo-anatomy__jump ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nosteo-anatomy__jump ul::-webkit-scrollbar { display: none; }
  .nosteo-anatomy__jump a { font-size: 14px; padding: 10px 16px; }
}

.nosteo-anatomy__hint {
  position: absolute;
  z-index: 12;
  left: var(--nosteo-site-pad);
  bottom: 30px;
  font-family: var(--nosteo-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nosteo-muted);
  transition: opacity 400ms var(--nosteo-ease);
}

/* ---------- mobile ----------
   The callout cannot sit beside the figure on a phone, so it docks to the bottom and the
   leader drops straight down to it. */

@media (max-width: 860px) {
  /* Full viewport height on a phone, header included. The mobile header is three rows deep
     — utility bar, search, logo — and subtracting all of it left the scene as a short band
     with the figure squeezed into it. The header floats over the top of the scene instead,
     which is what the gradient ground is for. */
  .nosteo-anatomy__viewport {
    height: 100vh;
    height: 100svh;
  }

  .nosteo-anatomy__hero {
    left: 18px;
    right: 18px;
    bottom: calc(104px + env(safe-area-inset-bottom));
    max-width: none;
  }
  .nosteo-anatomy__hero-heading { font-size: clamp(32px, 9vw, 44px); }
  .nosteo-anatomy__anno {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: calc(30px + env(safe-area-inset-bottom));
    top: auto !important;
  }
  .nosteo-anatomy__anno-title { font-size: 24px; }
  .nosteo-anatomy__anno-text { font-size: 14.5px; }
  .nosteo-anatomy__hint { display: none; }
}

/* CSS scroll-snap is gone with the track. Touch and wheel are both stepped by the script
   now, on a fixed amount of gesture travel — snapping commits by proximity to a midpoint,
   which is the behaviour that was rejected earlier anyway. */

@media (prefers-reduced-motion: reduce) {
  .nosteo-anatomy__anno,
  .nosteo-anatomy__hero,
  .nosteo-anatomy__closing,
  .nosteo-anatomy__poster { transition: none !important; }
}

/* Two situations need the same thing: a bounded scene with the copy in normal flow.
   `is-editor` — a fixed-position full-viewport scene is unusable in the Elementor canvas.
   `is-static` — reduced motion, or the animation switched off. The scene holds the
   resolved wide shot and every callout is readable in source order, which is what the
   build standards require rather than an empty hero. */
/* Un-stick the viewport and let it grow, so the copy inside it lays out in normal flow.
   Note this hides the SPACERS, not the track — the track now contains the whole scene, so
   `display: none` on it would blank the widget entirely. */
.nosteo-anatomy.is-editor .nosteo-anatomy__viewport,
.nosteo-anatomy.is-static .nosteo-anatomy__viewport {
  position: relative;
  top: auto;
  height: auto;
  overflow: visible;
}

/* `bottom: auto` matters: with the viewport now auto-height, an unqualified inset:0 would
   stretch these to the full height of the copy below them. */
.nosteo-anatomy.is-editor .nosteo-anatomy__stage,
.nosteo-anatomy.is-static .nosteo-anatomy__stage,
.nosteo-anatomy.is-editor .nosteo-anatomy__leaders,
.nosteo-anatomy.is-static .nosteo-anatomy__leaders,
.nosteo-anatomy.is-editor .nosteo-anatomy__poster,
.nosteo-anatomy.is-static .nosteo-anatomy__poster { bottom: auto; height: 70vh; }

.nosteo-anatomy.is-editor .nosteo-anatomy__hero,
.nosteo-anatomy.is-static .nosteo-anatomy__hero { position: absolute; }

.nosteo-anatomy.is-editor .nosteo-anatomy__closing,
.nosteo-anatomy.is-static .nosteo-anatomy__closing {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  margin-top: 70vh;
}

/* Keep the centred closing copy off the link row on short viewports. Only where the row
   is pinned to the bottom — in flow it sits after the copy and needs no room made. */
.nosteo-anatomy.is-complete:not(.is-static):not(.is-editor) .nosteo-anatomy__closing {
  padding-bottom: 108px;
}

/* In flow with everything else, directly under the closing call to action. */
.nosteo-anatomy.is-editor .nosteo-anatomy__jump,
.nosteo-anatomy.is-static .nosteo-anatomy__jump {
  position: relative;
  padding-bottom: 40px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nosteo-anatomy.is-editor .nosteo-anatomy__anno,
.nosteo-anatomy.is-static .nosteo-anatomy__anno {
  position: relative;
  opacity: 1;
  width: auto;
  max-width: 420px;
  margin: 0 0 28px;
  inset: auto;
}

.nosteo-anatomy.is-editor .nosteo-anatomy__hint,
.nosteo-anatomy.is-static .nosteo-anatomy__hint { display: none; }

/* The rule animates open on scroll; with nothing driving it, it just sits there. */
.nosteo-anatomy.is-editor .nosteo-anatomy__anno-rule,
.nosteo-anatomy.is-static .nosteo-anatomy__anno-rule { transform: none !important; }