/* Container height = number of panels × 100vh, so the stack has room to play */
.sticky-stack {
  position: relative;
  height: 300vh;
  /* 3 panels × 100vh */
}

.sticky-stack .wp-block-cover__inner-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Override max-width */
  max-width: 900px !important;
}

/* Each panel fills the viewport and pins to the top while its turn is active */
.sticky-stack .panel {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Optional polish */
  isolation: isolate;
  /* safer stacking for overlays */
}

.sticky-stack .panel h2 {
  font-size: clamp(22.5px, 2.2vw, 22.5px) !important;
}

.sticky-stack .panel p {
  font-size: clamp(22.5px, 2.2vw, 45px) !important;
}

/* Stacking order so later panels overlay earlier ones */
.sticky-stack .panel--one {
  z-index: 1;
}

.sticky-stack .panel--two {
  z-index: 2;
}

.sticky-stack .panel--three {
  z-index: 3;
}

.sticky-stack .panel--three .scroll-down {
  border: 3px solid black;
}

.sticky-stack .panel--three .scroll-down:before {
  background: black;
}

/* Parallax feel for the first panel (Cover’s “Fixed background” sets this).
     iOS can be finnicky; this keeps things smooth enough without JS. */
.sticky-stack .panel--one .wp-block-cover__image-background {
  background-attachment: fixed;
  will-change: transform;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .sticky-stack .panel--one .wp-block-cover__image-background {
    background-attachment: scroll;
  }
}

.sticky-stack .scroll-down {
  width: 35px;
  height: 60px;
  border-radius: 20px;
  border: 3px solid white;
  position: absolute;
  bottom: 4rem;
  /* TODO: make this dynamic */
  left: calc(50% - 15px);
  cursor: pointer
}

.sticky-stack .scroll-down:after,
.sticky-stack .scroll-down:before {
  content: "";
  display: block;
  position: absolute
}

.sticky-stack .scroll-down:before {
  width: 4px;
  height: 34px;
  border-radius: 2px;
  top: 10px;
  left: calc(50% - 2px);
  background: #fff;
  -webkit-animation: m-2-ball 1.2s cubic-bezier(.455, .03, .515, .955) infinite;
  animation: m-2-ball 1.2s cubic-bezier(.455, .03, .515, .955) infinite
}

@-webkit-keyframes m-2-ball {

  0%,
  50%,
  60% {
    transform: scaleY(.118)
  }

  30% {
    transform: scaleY(1)
  }

  0%,
  29.99% {
    transform-origin: top
  }

  30%,
  to {
    transform-origin: bottom
  }

  90%,
  to {
    transform: scaleY(.118) translateY(-255px)
  }
}

@keyframes m-2-ball {

  0%,
  50%,
  60% {
    transform: scaleY(.118)
  }

  30% {
    transform: scaleY(1)
  }

  0%,
  29.99% {
    transform-origin: top
  }

  30%,
  to {
    transform-origin: bottom
  }

  90%,
  to {
    transform: scaleY(.118) translateY(-255px)
  }
}

/* scroll animation */

/* --- First panel: define a view timeline --- */
.panel--one {
  view-timeline-name: --hero;
  /* modern scroll-driven animations */
  view-timeline-axis: block;
  overflow: hidden;
  /* hide edges while we scale */
}

/* Fallback styles for browsers without scroll-driven animations */
@supports not (animation-timeline: scroll()) {
  .panel--one h1 {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* Zoom the media (image OR video) as the panel scrolls */
.panel--one :is(.wp-block-cover__image-background,
  .wp-block-cover__video-background) {
  transform-origin: 50% 50%;
  will-change: transform;
  animation: hero-zoom linear both;
  animation-timeline: --hero;
  /* from when it enters until it's fully covering the viewport */
  animation-range: entry 0% cover 100%;
}

/* Fade (and subtly drift) the H1 as we scroll the hero */
.panel--one h1 {
  will-change: opacity, transform;
  animation: hero-fade linear both;
  animation-timeline: --hero;
  /* finish the fade a bit earlier so the grey panel can take over cleanly */
  animation-range: entry 0% cover 60%;
}

/* Keyframes */
@keyframes hero-zoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.25);
  }

  /* adjust to taste: 1.10–1.25 */
}

@keyframes hero-fade {
  35% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(1rem);
  }

}

/* If you previously enabled "Fixed background" on the Cover, turn it OFF.
   (Parallax + transform can fight on iOS; this forces the normal flow.) */
.panel--one.has-parallax,
.panel--one .has-parallax {
  background-attachment: scroll !important;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {

  .panel--one :is(.wp-block-cover__image-background,
    .wp-block-cover__video-background),
  .panel--one h1 {
    animation: none !important;
  }
}

/**
  Value stacks
/**

/* =========================================================
   BASE / NO-JS FALLBACK (safe for Safari & before JS loads)
   ========================================================= */
.values-stack {
  position: relative;
}

/* no sticky height in fallback */
.values-viewport {
  display: grid;
  align-items: stretch;
}

.values-grid {
  height: 100%;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  min-height: 60vh;
}

.values-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 2vh, 24px);
  padding: clamp(16px, 4vw, 64px);
  /* readable default from first panel */
  color: #000;
}

p.values-eyebrow {
  margin: 0 0 .5em;
  font-family: var(--wp--preset--font-family--merriweather, serif);
  font-size: clamp(22.5px, 2.2vw, 22.5px);
  line-height: 1.1;
  color: currentColor;
  opacity: 1;
}

.values-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.values-nav li {
  margin: .25em 0;
}

.values-trigger {
  text-decoration: none;
  display: block;
  font-family: var(--wp--preset--font-family--merriweather, serif);
  font-size: clamp(26px, 3.2vw, 48px);
  line-height: .5;
  color: currentColor !important;
  opacity: .28;
}

.values-nav li.active .values-trigger {
  opacity: 1;
}

.values-right {
  position: relative;
  overflow: hidden;
}

/* Fallback shows only the first panel (no crossfade) */
.values-panel {
  position: relative;
  inset: auto;
  display: flex;
  align-items: center;
  padding: clamp(16px, 6vw, 96px);
  color: var(--panel-text, #000);
  opacity: 1;
  pointer-events: auto;
}

.values-panel+.values-panel {
  display: none;
}

.values-panel__inner {
  max-width: 46rem;
}

.values-panel__inner p {
  font-size: clamp(22px, 2.2vw, 40px) !important;
}

@media (min-width:901px) {
  .values-acc-panel .inner{
    display: none;
  }
}

/* Mobile fallback (no JS): keep right column content visible */
@media (max-width:900px) {
  .values-grid {
    grid-template-columns: 1fr !important;
  }

  .values-right {
    display: block;
  }

  .values-trigger {
    font-size: clamp(22px, 7.2vw, 34px);
    padding: .15em 0;
  }

  .values-acc-panel {
    display: none;
  }

  /* accordion is JS-only */
  .values-nav li+li {
    border-top: 1px solid rgba(0, 0, 0, .08);
  }
}

/* =========================================
      ENHANCED MODE (only when JS is present)
      ========================================= */

/* Desktop: pinned + cross-fade */
html.js .values-stack {
  --panels: 4;
  position: relative;
  height: calc(var(--panels)*100vh);
}

html.js .values-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-items: stretch;
}

html.js .values-right {
  position: relative;
  overflow: hidden;
}

/* Ensure NO panel is left at display:none from fallback */
html.js .values-panel,
html.js .values-panel+.values-panel {
  display: flex !important;
}

html.js .values-panel {
  position: absolute;
  inset: 0;
  align-items: center;
  padding: clamp(16px, 6vw, 96px);
  color: var(--panel-text, #000);
  opacity: 0;
  pointer-events: none;
}

/* Force a reliable initial paint in Chrome/Safari */
html.js .values-right .values-panel:first-child {
  opacity: 1 !important;
  pointer-events: auto;
  display: flex !important;
}

html.js .values-trigger {
  transition: opacity .25s ease, transform .25s ease;
}

html.js .values-trigger:hover,
html.js .values-trigger:focus-visible {
  opacity: .6;
  transform: translateX(4px);
}

/* Mobile: accordion mode (JS drives colours & heights) */
@media (max-width:900px) {
  html.js .values-grid {
    grid-template-columns: 1fr !important;
  }

  html.js .values-right {
    display: none;
  }

  /* hide crossfade stack */

  /* Left column becomes the colour card (JS also sets inline bg/fg for Safari) */
  html.js .values-left {
    gap: clamp(12px, 2vh, 18px);
    padding: clamp(16px, 5vw, 28px);
    background: var(--acc-bg, #8fb5c2);
    color: var(--acc-fg, #000);
    transition: background-color .45s ease, color .3s ease;
    border-radius: 10px;
  }

  html.js .values-trigger {
    font-size: clamp(22px, 7.2vw, 34px);
    padding: .15em 0;
  }

  html.js .values-acc-panel {
    display: block;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height .32s ease, opacity .22s ease;
    will-change: height, opacity;
  }

  /* Hide the duplicate right-hand copy only in enhanced mobile */
  html.js .values-panel__inner {
    padding: 0;
  }

  /* content comes from accordion */
  @media (min-width:901px) {
    .values-acc-panel .inner {
      display: none;
    }
  }

  html.js .values-acc-panel .inner {
    padding: .4rem 0 1rem;
  }

  html.js .values-acc-panel h3 {
    margin: .5rem 0 .35rem;
    font-size: clamp(18px, 5.8vw, 22px);
  }

  html.js .values-acc-panel p {
    margin: 0;
    font-size: clamp(22.5px, 4.6vw, 36px) !important;
    line-height: 1.45;
  }

  html.js .values-nav li.active .values-trigger {
    opacity: 1;
    transform: none;
  }
}

/* =========================================
      Performance & A11y
      ========================================= */
.values-left {
  will-change: background-color, color;
  contain: layout paint;
}

.values-acc-panel {
  transition: height .28s ease, opacity .22s ease;
}

@media (prefers-reduced-motion: reduce) {

  html.js .values-panel,
  html.js .values-left,
  html.js .values-acc-panel,
  html.js .values-trigger {
    transition: none !important;
  }
}


/* Stop any accidental overpaint while the sticky viewport initialises */
html.js .values-viewport {
  isolation: isolate;
}

/* Ensure the pinned stage sits in its own paint context */
html.js .values-stack {
  contain: layout paint;
}

/* (Optional) If you see any stacking oddities, force a base z-index */
html.js .values-viewport {
  z-index: 0;
}