/* ribbon3d.css - 3D ribbon board animation system */

/* MULTI BOARD ANIMATION */
/* 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 positioning so scenes sit inside their own pair
 * row, anchored to the bottom so the trapezoid fills the upper portion.
 * Specificity (0,2,0) beats base .scene (0,1,0) on all properties except
 * where a lower-specificity !important exists - hence only top keeps
 * !important, to beat @media(480px) .scene-left { top: 20% !important }.
 */
.ll-anim-row .scene {
  --ll-scene-width: min(calc(350px * var(--ll-pair-scale, 1)), calc(50vw - 40px));
  --ll-side-by-side-offset: min(25vw, var(--ll-scene-width));
  width: var(--ll-scene-width);
  height: auto;
  aspect-ratio: 5 / 3;
  top: auto !important; /* beats @media(480px) .scene-left { top: 20% !important } */
  bottom: 0;
  transform: translate(-50%, 0);
  transform-origin: 50% 100%;
  perspective: none;
  transform-style: flat;
  isolation: isolate;
}

/* (0,2,0) specificity beats base .scene-left/.scene-right - no !important needed */
.ll-anim-row .scene-left  { left: calc(50% - var(--ll-side-by-side-offset)); z-index: 1; }
.ll-anim-row .scene-right { left: calc(50% + var(--ll-side-by-side-offset)); }

/* 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));
}

/* RIBBON & BOARD ANIMATION SYSTEM */

.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 {
    --ll-scene-width: min(350px, calc(50vw - 18px));
    --ll-side-by-side-offset: min(25vw, var(--ll-scene-width));
    width: var(--ll-scene-width);
    height: auto;
    aspect-ratio: 5 / 3;
    perspective-origin: 50% 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.scene-left  { left: calc(50% - var(--ll-side-by-side-offset)); }
.scene-right { left: calc(50% + var(--ll-side-by-side-offset)); }

@media (max-width: 768px) {
    .scene-left { top: 55%; transform: translate(-50%, -50%);}
    .scene-right { top: 75% ; transform: translate(-50%, -50%);}
}

.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(--wp--custom--satin--bg-image);
  background-size: var(--wp--custom--satin--bg-size);
  background-blend-mode: var(--wp--custom--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(var(--wp--custom--rgb--white), 0.4) inset,
      0 -1px 1px rgba(var(--wp--custom--rgb--night), 0.05) inset,
      var(--wp--custom--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; font-style: normal; }
.face em, .face i     { font-style: italic; }

/* 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-poly {
    /* 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); }
}

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

/* Responsive overrides */
@media (max-width: 768px) {
  .sticky-wrapper {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ll-multi-animation-wrapper[data-count="1"] .ll-anim-row .scene {
    width: clamp(240px, 70vw, 280px);
    height: clamp(140px, 40vw, 160px);
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }

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

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

  .scene-right {
    top: 80% !important;
  }
}