/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Text Domain: twentytwentyfive-child
*/
/* ===========================================
   MULTI BOARD ANIMATION (ribbon groups)
   =========================================== */

/* The outer scroll-driving container; height set by JS */
.ll-multi-animation-wrapper {
  position: relative;
}

/* Sticky stage */
.ll-multi-animation-wrapper .sticky-wrapper {
  --ll-scroll-cue-top: clamp(10px, 1.4vh, 16px);
  --ll-scroll-row-gap: clamp(26px, 3.8vh, 36px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(8px, 1.25vh, 16px);
  padding: calc(var(--ll-scroll-cue-top) + var(--ll-scroll-row-gap)) 0 clamp(8px, 1vh, 14px);
  box-sizing: border-box;
}

/* Grouped product: keep Description -> animation transition tighter. */
.single-product main .wp-block-woocommerce-product-details .ll-board-animation-block,
.single-product main .woocommerce-tabs .ll-board-animation-block {
  padding-top: 1cm !important;
}

/* Each animation row — height set by JS */
.ll-anim-row {
  position: relative;
  width: 100%;
  height: var(--ll-pair-height, 438px);
  flex-shrink: 0;
}

/*
 * Override the global .scene absolute positioning so scenes sit inside
 * their own pair row.
 * Anchor to the BOTTOM of the row so the trapezoid (which extends upward
 * from the board center) fills the upper portion of the row.
 */
.ll-anim-row .scene {
  width: min(calc(350px * var(--ll-pair-scale, 1)), calc(50vw - 40px)) !important;
  height: auto !important;
  aspect-ratio: 5 / 3;
  top: auto !important;
  bottom: 0 !important;
  transform: translate(-50%, 0) !important;
  transform-origin: 50% 100% !important;
}

/* Keep left/right split */
.ll-anim-row .scene-left  { left: 25% !important; }
.ll-anim-row .scene-right { left: 75% !important; }

/* Preserve 3D inside every multi-pair scene */
.ll-anim-row .scene {
  perspective: none !important;
  transform-style: flat;
  isolation: isolate;
}

/* Scale trapezoid visual size without parent transform scaling (Firefox stability). */
.ll-anim-row .ll-trap-svg {
  width: calc(222px * var(--ll-pair-scale, 1));
  height: calc(333px * var(--ll-pair-scale, 1));
}

/* Single-ribbon group on mobile: mirror single-animation vertical stacking. */
@media (max-width: 768px) {
  .ll-multi-animation-wrapper[data-count="1"] .ll-anim-row .scene {
    width: clamp(240px, 70vw, 280px) !important;
    height: clamp(140px, 40vw, 160px) !important;
    top: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .ll-multi-animation-wrapper[data-count="1"] .ll-anim-row .scene-left {
    top: 25% !important;
    z-index: 2;
  }

  .ll-multi-animation-wrapper[data-count="1"] .ll-anim-row .scene-right {
    top: 75% !important;
    z-index: 1;
  }
}

/* ===========================================
   SECTION COLOR TOKENS — global
   =========================================== */

:root {
  --ll-home-dark:       #121a24;
  --ll-home-dark-deep:  #0c121a;
  --ll-home-dark-soft:  #1b2735;
  --ll-home-light:      #fffcf8;
  --ll-home-light-soft: #f3eadf;
  --ll-home-fg-dark:    #f8f4ec;
  --ll-home-fg-light:   #2a1f14;
  --ll-home-muted-dark: rgba(248, 244, 236, 0.74);
  --ll-home-muted-light:rgba(42, 31, 20, 0.7);
  --ll-home-accent-dark:#ffd9c9;
}

/* Zero out WP block-gap between numbered sections — applies everywhere */
.entry-content > :is(.ll-s1, .ll-s2, .ll-s3, .ll-s4, .ll-s5, .ll-s-tracker) {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ---- Section backgrounds — global ---- */
.ll-s1 {
  background:
    radial-gradient(1100px 380px at 50% -12%, var(--ll-home-dark-soft) 0%, transparent 62%),
    linear-gradient(180deg, var(--ll-home-dark) 0%, var(--ll-home-dark-deep) 100%);
}

.ll-s2 {
  background:
    radial-gradient(1200px 420px at 50% -15%, var(--ll-home-light) 0%, transparent 64%),
    linear-gradient(180deg, var(--ll-home-light) 0%, var(--ll-home-light-soft) 100%);
}

:is(.ll-s3, .ll-s-tracker) {
  background:
    radial-gradient(950px 360px at 50% -16%, #243447 0%, transparent 64%),
    linear-gradient(180deg, var(--ll-home-dark) 0%, var(--ll-home-dark-deep) 100%);
}

:is(.ll-s4, .ll-s5) {
  background:
    radial-gradient(1300px 470px at 50% -18%, var(--ll-home-light) 0%, transparent 66%),
    linear-gradient(180deg, var(--ll-home-light) 0%, var(--ll-home-light-soft) 100%);
}

/* ---- Dark sections — text ---- */
:is(.ll-s1, .ll-s3, .ll-s-tracker)
  :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, cite, .wp-block-heading, .ll-eyebrow, .ll-ribbon-name) {
  color: var(--ll-home-fg-dark) !important;
}
:is(.ll-s1, .ll-s3, .ll-s-tracker)
  :where(a, .ll-ribbon-meta) {
  color: var(--ll-home-accent-dark) !important;
}
:is(.ll-s1, .ll-s3, .ll-s-tracker)
  :where(p, li, .ll-ribbon-meta) {
  color: var(--ll-home-muted-dark) !important;
}

/* ---- Light sections — text ---- */
:is(.ll-s2, .ll-s4, .ll-s5)
  :where(h1, h2, h3, h4, h5, h6, p, li, blockquote, cite, .wp-block-heading, .ll-eyebrow, .ll-ribbon-name, .ll-cat-title) {
  color: var(--ll-home-fg-light) !important;
}
:is(.ll-s2, .ll-s4, .ll-s5)
  :where(p, li, .ll-ribbon-meta) {
  color: var(--ll-home-muted-light) !important;
}
:is(.ll-s2, .ll-s4, .ll-s5) a {
  color: var(--wp--preset--color--ll-ribbon) !important;
}

/* ---- Homepage dark sections — buttons ---- */
body:is(.home, .front-page) :is(.ll-s1, .ll-s3) .wp-block-button__link {
  background: var(--ll-home-light) !important;
  color: var(--wp--preset--color--ll-ink) !important;
  border-color: var(--ll-home-light) !important;
}
body:is(.home, .front-page) :is(.ll-s1, .ll-s3)
  :is(.ll-btn-secondary) .wp-block-button__link,
body:is(.home, .front-page) :is(.ll-s1, .ll-s3)
  .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: var(--ll-home-fg-dark) !important;
}
body:is(.home, .front-page) :is(.ll-s1, .ll-s3)
  :where(.wp-block-button__link):hover {
  background: rgba(255, 252, 248, 0.88) !important;
  border-color: rgba(255, 252, 248, 0.88) !important;
  color: var(--wp--preset--color--ll-ink) !important;
}
body:is(.home, .front-page) :is(.ll-s1, .ll-s3)
  :is(.ll-btn-secondary) .wp-block-button__link:hover,
body:is(.home, .front-page) :is(.ll-s1, .ll-s3)
  .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.13) !important;
  color: var(--ll-home-fg-dark) !important;
}

/* ===========================================
   RIBBON & BOARD ANIMATION SYSTEM
   (Move this block to a separate file later)
   =========================================== */

:root {
  /* Matte Satin Look Custom Properties */
  --ll-matte-satin-bg-image: linear-gradient(45deg, rgba(99, 83, 69, 0.12) 25%, transparent 25%),
                             linear-gradient(-45deg, rgba(99, 83, 69, 0.12) 25%, transparent 25%),
                             linear-gradient(180deg, #dfd3aa 0%, #f2e5bf 50%, #cfc299 100%);
  --ll-matte-satin-bg-size: 3px 3px, 3px 3px, 100% 100%;
  --ll-matte-satin-bg-blend-mode: color-dodge;
  --ll-matte-satin-outer-shadow: 0 4px 12px rgba(94, 79, 65, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
  --ll-matte-satin-outer-shadow-hover: 0 8px 18px rgba(94, 79, 65, 0.18), 0 2px 5px rgba(0, 0, 0, 0.1);
  --ll-matte-satin-hover-transform: translateY(-2px);
}

/* Layout & Sticky Settings */
.animation-container {
    height: 800vh;
    position: relative;
}

.ll-board-animation-block {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
}

.ll-board-animation-block .sticky-wrapper {
    border-radius: 0;
}

main .ll-board-animation-block,
.single-product .ll-board-animation-block {
  padding-top: var(--wp--custom--spacing--zen);
  padding-bottom: var(--wp--custom--spacing--zen);
}

.ll-board-animation-block.ll-visible {
  padding: 0 !important;
}

.sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* ── Scroll cue — keep tight spacing around cue text ── */
.ll-board-animation-block .sticky-wrapper::after {
    content: '↓ scroll';
    position: absolute;
    top: var(--ll-scroll-cue-top, 1rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: .65rem;
    letter-spacing: .2em;
    color: var(--wp--preset--color--ll-bark-light);
    opacity: .45;
    animation: ll-bounce 2s ease-in-out infinite;
    pointer-events: none;
}

/* Subtle ambient glow behind the boards */
.sticky-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 25% 50%, rgba(var(--wp--custom--rgb--ribbon),.08) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 75% 50%, rgba(var(--wp--custom--rgb--ribbon),.08) 0%, transparent 70%);
    pointer-events: none;
}

/* 3D Scene & Components */
.scene {
    width: min(350px, calc(50vw - 18px));
    height: auto;
    aspect-ratio: 5 / 3;
    perspective-origin: center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective-origin: 50% 50%;
}

.scene-left  { left: 25%; }
.scene-right { left: 75%; }

@media (max-width: 768px) {
    .scene-left { top: 25% !important; transform: translate(-50%, -50%) !important; z-index: 2; }
    .scene-right { top: 75% !important; transform: translate(-50%, -50%) !important; z-index: 1; }
}

@media (max-width: 480px) {
    .scene-left { top: 20% !important; }
    .scene-right { top: 80% !important; }
}

.board {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
    transition: none;
    transform-origin: 50% 50% 0px;
    will-change: transform;
}

/* Matte Satin Skin */
.face {
  background-image: var(--ll-matte-satin-bg-image);
  background-size: var(--ll-matte-satin-bg-size);
  background-blend-mode: var(--ll-matte-satin-bg-blend-mode);
  border-radius: 2px;
}

/* Trapezoid satin — SVG filter instead */
.ll-trap-svg {
  filter: brightness(1.04) contrast(0.97) saturate(0.9);
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateZ(2px);
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Aleo', 'Georgia', serif;
    font-size: clamp(.95rem, 1.1rem, 1.5rem);
    box-shadow: 
      0 1px 0 rgba(255, 255, 255, 0.4) inset,
      0 -1px 1px rgba(0, 0, 0, 0.05) inset,
      var(--ll-matte-satin-outer-shadow);
    font-weight: 300;
    text-align: center;
    line-height: 1.4;
    padding: clamp(12px, 2vw, 24px) clamp(12px, 2vw, 20px);
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.face strong, .face b { font-weight: 700 !important; font-style: normal; }
.face em, .face i     { font-style: italic !important; }

/* ── Image-only face (SVG slot) ── */
.face--image {
    padding: 0;
    overflow: hidden;
}
.face--image img {
    width: 55%;
    object-fit: contain;
    display: block;
}

.back { transform: rotateX(180deg) translateZ(2px); }

/* Trapezoid / Ribbon Tails */
.trapezoid-container {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%) translateZ(-260px);
    z-index: 1;
    pointer-events: none;
}

/* .ll-trap-svg {
  filter: drop-shadow(var(--ll-matte-satin-outer-shadow));
  transition: transform 0.2s ease, filter 0.2s ease;
} */

.ll-trap-poly,
#trapezoid-polygon,
#right-trapezoid-polygon {
    /* fill handled by SVG linearGradient */
    stroke: var(--wp--preset--color--ll-ribbon);
    stroke-width: 1.5;
}

/* Animations & Effects */
@keyframes ll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(5px); }
}

/* Multi-Ribbon Groups */
.ll-multi-animation-wrapper { position: relative; }
.ll-multi-animation-wrapper .sticky-wrapper {
  --ll-scroll-cue-top: clamp(10px, 1.4vh, 16px);
  --ll-scroll-row-gap: clamp(26px, 3.8vh, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.25vh, 16px);
  padding: calc(var(--ll-scroll-cue-top) + var(--ll-scroll-row-gap)) 0 clamp(8px, 1vh, 14px);
}

.ll-anim-row {
  position: relative;
  width: 100%;
  height: var(--ll-pair-height, 438px);
  flex-shrink: 0;
}

.ll-anim-row .scene {
  width: min(calc(350px * var(--ll-pair-scale, 1)), calc(50vw - 40px)) !important;
  top: auto !important;
  bottom: 0 !important;
  transform: translate(-50%, 0) !important;
  transform-origin: 50% 100% !important;
}

.ll-anim-row .scene-left  { left: 25% !important; }
.ll-anim-row .scene-right { left: 75% !important; }

/* Mobile Responsive Stack */
@media (max-width: 768px) {
  .ll-multi-animation-wrapper[data-count="1"] .ll-anim-row .scene {
    width: clamp(240px, 70vw, 280px) !important;
    height: clamp(140px, 40vw, 160px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  .ll-multi-animation-wrapper[data-count="1"] .ll-anim-row .scene-left {
    top: 25% !important;
    z-index: 2;
  }
  .ll-multi-animation-wrapper[data-count="1"] .ll-anim-row .scene-right {
    top: 75% !important;
    z-index: 1;
  }
}


@keyframes ll-star-sparkle {
    0%, 100% { filter: saturate(1.08) brightness(1); }
    50% { filter: saturate(1.24) brightness(1.15); }
}

/* Ensure ribbons are visible immediately in overlay mode */
.body-overlay-active .ll-board-animation-block {
    opacity: 1 !important;
    transform: none !important;
}

#animation-container { 
    --board-distance: 400px; 
}