/* Split Showcase Layout */
:root {
  --split-gap: clamp(1rem, 4vw, 3rem);
  --split-max-width: 1600px;
  --split-radius: 18px;
  --split-bg: transparent;
  --split-border: var(--icon-2-light);
  --split-border-alt: var(--icon-2-dark);
  --split-shadow: 0 0 0 1px hsl(calc(var(--active-color) - 0) 0% 100% / 0.04), 
                  0 2px 4px -2px hsl(calc(var(--active-color) - 10) 0% 0% / 0.4),
                  0 8px 24px -4px hsl(calc(var(--active-color) - 30) 70% 5% / 0.5),
                  0 0 40px -8px hsl(calc(var(--active-color) - 70) 90% 55% / 0.35);
  /* Seam bar sizing (Safari friendly: animate via scale instead of width %) */
  --seam-base-width: 14px;
}

/* Performance helpers (non-destructive)
  - limit repaint/paint scopes with `contain` where safe
  - promote frequently-animated layers to their own composite layers
  - reduce heavy effects on touch/coarse devices
*/

.split-showcase-wrapper { 
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 6rem);
  position: relative;
  max-width: var(--split-max-width);
  z-index: 5;
}

.split-showcase { 
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  position: relative;
  isolation: isolate;
}

/* Scroll-in border fade only (no movement) */
.split-showcase {
  --showcase-border-color: hsl(calc(var(--active-color) + 15) 95% 70% / 0.95);
  --showcase-border-fade: hsl(calc(var(--active-color) + 15) 95% 70% / 0);
  position: relative;
  border: 2px solid transparent; /* prevent layout shift */
  border-radius: calc(var(--split-radius) * 1.25);
}

/* Use a pseudo for glow + border so size never changes */
.split-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 0 2px var(--showcase-border-color),
    0 0 16px -2px hsl(calc(var(--active-color) + 10) 100% 65% / 0.55),
    0 0 48px -4px hsl(calc(var(--active-color) + 30) 100% 60% / 0.35);
  opacity: 1;
  transition: opacity 4.4s cubic-bezier(.3,.8,.25,1), box-shadow 4.4s cubic-bezier(.3,.8,.25,1), border-radius .5s ease;
  will-change: opacity;
}

/* After viewed: fade out glow + border */
.split-showcase.is-viewed::before { opacity: 0; }

/* Keep original rounding after viewed; no radius override to avoid sharp mismatch */

/* (Removed prior blanket disable of entrance animation to restore fade/translate, including on Safari) */

/* Removed duplicate ::before gradient block (background was transparent) to prevent border-radius desync */

.split-showcase::after { /* glow ring */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--split-radius) * 1.25);
  filter: blur(22px) saturate(140%);
  z-index: -3;
  pointer-events: none;
}

.split-pair { 
  display: flex;
  gap: var(--split-gap);
  justify-content: center;
}

/* Frame containing the two halves (clipped box) */
.pair-frame { 
  flex: 1 1 auto;
  display: flex;
  position: relative;
  width: 100vw;              /* full bleed */
  left: 50%;
  /* promote to its own layer and hint about upcoming transforms */
  transform: translateX(-50%) translateZ(0); /* center relative to parent */
  will-change: transform, left, height, width;
  contain: paint; /* isolate painting to avoid large repaints */
  transition: transform .28s cubic-bezier(.4,0,.3,1);
  -webkit-transition: -webkit-transform .28s cubic-bezier(.4,0,.3,1);
  max-width: none;
  border-radius: 4vh;          /* flush with viewport edges */
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;      /* stable height */
  gap: 0;                    /* remove internal spacing so halves touch */
}

/* Desktop: constrain width so it doesn't stretch edge-to-edge */
@media (min-width: 1100px) {
  .pair-frame {
    width: 100%;            /* take normal flow width */
    max-width: var(--split-desktop-frame-max);
    left: 0;
    transform: none;        /* cancel 50% centering hack */
    margin-inline: auto;    /* center within wrapper */
    border-radius: calc(var(--split-radius) * 1.6);
  }
  .split-showcase-wrapper {
    padding-inline: clamp(0rem, 0vw, 4rem); /* add some breathing room */
  }
  /* Turn stacked sections into a 2x2 grid on desktop */
  .split-showcase-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 3.5vw, 3rem);
  }
  .split-showcase { /* remove vertical gap stacking side-effects */
    margin: 0;
  }
}

/* Container-level seam glow bar (Fix B) */
.pair-frame::after {
  content: "";
  position: absolute;
  left: var(--seam-x, 50%); /* dynamically positioned via JS (px) */
  top: 50%;
  /* Start as a circular "ball" and scale uniformly. When expanded the
    element will grow via height (and can be further scaled). Using a
    uniform scale avoids odd oval shapes as the default. */
  transform: translate(-50%, -50%) scale(var(--seam-scale,1));
  -webkit-transform: translate(-50%, -50%) scale(var(--seam-scale,1));
  width: var(--seam-base-width); /* stable intrinsic size */
  height: var(--seam-base-width); /* make default a circle */
  border-radius: 999px;
  /* Base (expanded-capable) seam element now styled as a glassy core; color/glow for active state only — neutral state handled below. */
  background:
    radial-gradient(circle at 32% 28%, hsl(0 0% 100% / .22), hsl(0 0% 100% / 0) 36%), /* tighter specular */
    radial-gradient(circle at 70% 74%, hsl(0 0% 100% / .10), hsl(0 0% 100% / 0) 42%), /* reduced bloom */
    linear-gradient(155deg,
      hsl(calc(var(--active-color) + 16) 90% 68% / .78) 0%,
      hsl(calc(var(--active-color) + 4) 92% 63% / .76) 30%,
      hsl(calc(var(--active-color) - 14) 92% 56% / .74) 60%,
      hsl(calc(var(--active-color) + 10) 94% 62% / .78) 100%); /* chroma spine (softened) */
  box-shadow:
    0 0 0 1px hsl(calc(var(--active-color) + 12) 95% 72% / .50),
    0 2px 3px -1px hsl(calc(var(--active-color) - 10) 70% 5% / .55),
    0 4px 10px -2px hsl(calc(var(--active-color) - 20) 70% 4% / .45),
    0 0 18px -4px hsl(calc(var(--active-color) + 18) 95% 65% / .45),
    inset 0 0 6px hsl(calc(var(--active-color) + 18) 95% 70% / .22),
    inset 0 0 3px hsl(0 0% 100% / .18);
  pointer-events: none;
  z-index: 50; /* above both halves */
  transition: left .32s cubic-bezier(.3,.8,.25,1), height .55s ease, box-shadow .55s ease, background .5s ease, -webkit-transform .5s cubic-bezier(.3,.8,.25,1), opacity 1.3s ease, transform 2.3s cubic-bezier(.3,.8,.25,1);
  -webkit-transition: left .32s cubic-bezier(.3,.8,.25,1), height .55s ease, box-shadow .55s ease, background .5s ease, -webkit-transform .5s cubic-bezier(.3,.8,.25,1), opacity 1.3s ease, transform 2.3s cubic-bezier(.3,.8,.25,1);
  will-change: left, height, transform;
  opacity: 1;
}

/* Inactive (no expansion) state: neutral gray bar with softer glow */
/* Inactive (neutral) state: broaden via scale instead of width for Safari */
/* Neutral (non-expanding) state: clone "liquid glass" aesthetics from header.
   We swap the vivid chroma spine for a subdued glass puck that still feels
   alive. This fully overrides the earlier gray ball. */
.pair-frame:not(.expanding)::after {
  --seam-scale: 5.2; /* reduced overall footprint */
  background:
    radial-gradient(circle at 28% 26%, hsl(0 0% 100% / .10), hsl(0 0% 100% / 0) 30%),
    radial-gradient(circle at 70% 78%, hsl(0 0% 100% / .06), hsl(0 0% 100% / 0) 36%),
    linear-gradient(145deg, hsl(0 0% 24% / .78), hsl(0 0% 14% / .82) 48%, hsl(0 0% 8% / .86) 100%);
  backdrop-filter: blur(10px) saturate(1.25) contrast(1.02) brightness(1.02);
  -webkit-backdrop-filter: blur(10px) saturate(1.25) contrast(1.02) brightness(1.02);
  mix-blend-mode: normal;
  opacity: .94;
  /* remove the thin white border and strong inset highlights that caused a faint square artifact */
  /* border: removed intentionally */
  box-shadow:
    0 2px 3px -1px hsl(0 0% 0% / .60),
    0 4px 10px -2px hsl(0 0% 0% / .65),
    0 0 10px -6px hsl(calc(var(--active-color) + 16) 95% 62% / .14),
    inset 0 0 6px hsl(0 0% 100% / .06);
  filter: saturate(1.03) contrast(1.02);
}

.pair-frame.expanding::after {
  /* Reset scale when expanded so the element becomes a full-height bar
     rather than a giant scaled ball. Make the bar half as thin and switch
     to an active/theme color for visual emphasis. */
  --seam-scale: 1;
  width: calc(var(--seam-base-width) / 4); /* half as thin when expanded */
  height: 100%;
  /* active colored bar (uses --active-color) */
  background: linear-gradient(180deg,
    hsl(calc(var(--active-color) + 10) 95% 66% / .95) 0%,
    hsl(calc(var(--active-color) - 8) 90% 50% / .95) 100%);
  box-shadow:
    0 0 0 1px hsl(calc(var(--active-color) + 12) 95% 72% / .60),
    0 0 18px 6px hsl(calc(var(--active-color) + 18) 95% 60% / .28),
    inset 0 0 8px hsl(calc(var(--active-color) + 14) 95% 75% / .15);
  mix-blend-mode: screen;
  /* include width in transitions so thining animates smoothly */
  transition: left .32s cubic-bezier(.3,.8,.25,1), width .36s cubic-bezier(.3,.8,.25,1), height .55s ease, box-shadow .55s ease, background .5s ease, transform .5s cubic-bezier(.3,.8,.25,1), opacity 1.3s ease, transform 2.3s cubic-bezier(.3,.8,.25,1);
  -webkit-transition: left .32s cubic-bezier(.3,.8,.25,1), width .36s cubic-bezier(.3,.8,.25,1), height .55s ease, box-shadow .55s ease, background .5s ease, -webkit-transform .5s cubic-bezier(.3,.8,.25,1), opacity 1.3s ease, transform 2.3s cubic-bezier(.3,.8,.25,1);
}


/* Optional: fallback when flex gap unsupported */
@supports not (gap: 1rem) {
  .pair-frame { gap: 0; }
  .pair-frame > * + * { margin-left: var(--split-gap); }
}

.split-showcase.alt .split-pair { direction: rtl; } /* allows easy visual alternate without changing markup */
.split-showcase.alt .split-pair > * { direction: ltr; }

.pair-frame .product-half { 
  position: relative;
  flex: 1 1 50%;
  display: flex;
  overflow: hidden;
  border-radius: 0;
  min-height: 100%;
  min-width: 0; /* prevents flex overflow and layout thrash */
  will-change: flex-basis, filter;
  transition: flex-basis .62s cubic-bezier(.2, .9, .25, 1), filter .28s linear;
  -webkit-transition: flex-basis .32s cubic-bezier(.2, .9, .25, 1), filter .28s linear;
  z-index: 1;
}
/* elevate first half so its seam glow appears above second */
.pair-frame .product-half:first-child { z-index: 20; overflow: visible; }

/* (Old seam pseudos removed; container bar stays centered at 50%) */

/* product halves fill the frame height; avoid height derived from width so expansion only affects width */
.pair-frame .product-half { height: 100%; }
.pair-frame .product-half > * { position: relative; width:100%; height:100%; }

/* Fallback for browsers that don't support aspect-ratio (older Safari)
   Use the classic padding-top trick to preserve frame height. */
@supports not (aspect-ratio: 1/1) {
  .pair-frame { position: relative; }
  .pair-frame::before { content: ""; display:block; padding-top: calc(100% * 9 / 16); }
  .pair-frame > * { position: absolute; inset:0; }
}

/* Flex-basis animated expansion (animate flex-basis for smoother transitions) */
.pair-frame.expanding .product-half { flex-basis: 25%; }
.pair-frame.expanding .product-half.is-expanded { flex-basis: 75%; filter:brightness(1.06) saturate(1.08); }
.pair-frame.expanding .product-half:not(.is-expanded) { filter:brightness(.78) saturate(.82); }

/* Remove only the inner rounding so halves meet directly but keep outer corners rounded */
.pair-frame .product-half:first-child img {
  /* round left corners, square on the right (seam) */
  border-radius: calc(var(--split-radius) - max(4px, var(--card-pad) * 0.55)) 0 0 calc(var(--split-radius) - max(4px, var(--card-pad) * 0.55));
}
.pair-frame .product-half:last-child img {
  /* round right corners, square on the left (seam) */
  border-radius: 0 calc(var(--split-radius) - max(4px, var(--card-pad) * 0.55)) calc(var(--split-radius) - max(4px, var(--card-pad) * 0.55)) 0;
}

/* Visual emphasis when one side expands */
/* (Removed old expanded-left/right grid effects) */

.split-showcase.alt .product-half { border-color: var(--split-border-alt); }

.product-half figure { 
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  position: relative;
}

.product-half img { 
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: saturate(1.15) contrast(1.05);
  /* promote images to composite layer and limit repaint cost */
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, filter, object-position;
  transition: transform .28s cubic-bezier(.4,0,.3,1), filter .28s linear, object-position .28s linear;
  -webkit-transition: -webkit-transform .28s cubic-bezier(.4,0,.3,1), filter .28s linear, object-position .28s linear;
  border-radius: calc(var(--split-radius) - max(4px, var(--card-pad) * 0.55));
  z-index: 1;
}

/* Reduce heavy visual work on touch / coarse-pointer devices */
@media (hover: none) and (pointer: coarse) {
  /* Mobile / touch: keep motion (fix for Safari) but lighten effects */
  .pair-frame::after {
    filter: none !important;
    -webkit-filter: none !important;
    /* simpler shadow to cut GPU overdraw, keep transition */
    box-shadow: 0 0 24px 8px hsl(calc(var(--active-color) + 15) 100% 60% / .35);
    opacity: .9;
  }
  .split-showcase::after { filter: none !important; box-shadow: none !important; }
  .pair-frame { will-change: transform; contain: layout style; }
  .product-half img { filter: none !important; -webkit-filter: none !important; }

  /* Ensure outer corners are clipped correctly on touch devices.
     Some mobile browsers promote images to their own layer which can
     bypass parent clipping until a repaint (often fixed by interaction).
     Force overflow clipping on halves and provide a mask on the image
     to guarantee rounded corners appear immediately. */
  .pair-frame .product-half:first-child {
    border-radius: calc(var(--split-radius) - max(4px, var(--card-pad) * 0.55)) 0 0 calc(var(--split-radius) - max(4px, var(--card-pad) * 0.55));
    overflow: hidden !important;
  }
  .pair-frame .product-half:last-child {
    border-radius: 0 calc(var(--split-radius) - max(4px, var(--card-pad) * 0.55)) calc(var(--split-radius) - max(4px, var(--card-pad) * 0.55)) 0;
    overflow: hidden !important;
  }

  /* Force proper masking on GPU-accelerated images (fixes Safari/Chrome rendering) */
  .product-half img {
    -webkit-mask-image: linear-gradient(#000 0 0);
    mask-image: linear-gradient(#000 0 0);
    border-radius: inherit; /* follow parent rounding when present */
  }
}

/* Fallback for very old browsers that don't support transform scaling */
@supports not (transform: scaleX(2)) {
  .pair-frame::after { transform: translate(-50%, -50%); width: 14px; }
  .pair-frame:not(.expanding)::after { width: 120px; }
}

/* Reveal behavior: anchor image inside its container so expansion shows more of it
  First child when expanded should anchor left; second child anchor right. The
  opposite (non-expanded) anchors toward the border so it appears underlapped. */
.pair-frame.expanding .product-half.is-expanded:nth-child(1) img { object-position: left center; }
.pair-frame.expanding .product-half.is-expanded:nth-child(2) img { object-position: right center; }
.pair-frame.expanding .product-half:not(.is-expanded):nth-child(1) img { object-position: right center; }
.pair-frame.expanding .product-half:not(.is-expanded):nth-child(2) img { object-position: left center; }

.product-half::after { /* subtle inner vignette */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 55%, transparent 20%, hsl(240 50% 8%));
  mix-blend-mode: add;
  opacity: .55;
  pointer-events: none;
}

.product-half:hover img { 
  filter: saturate(1.18) contrast(1.05); 
}

.split-description { 
  max-width: min(70ch, 92%);
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  line-height: 1.5;
  font-size: clamp(.95rem, .8rem + .4vw, 1.06rem);
  padding: 1.25rem 1rem 0;
}

.split-description h3 { 
  font-size: clamp(1.35rem, 1.05rem + .9vw, 2.05rem);
  font-weight: 600;
  letter-spacing: .5px;
  background: linear-gradient(90deg, hsl(calc(var(--active-color) - 2) 90% 70%) 90% 70%, hsl(calc(var(--active-color) - 30) 90% 70%) 85% 70%);
  background-clip: text;
  -webkit-background-clip: text; 
  color: transparent;
  filter: drop-shadow(0 4px 18px hsl(265 85% 60% / 0.35));
  position: relative;
  padding-bottom: 0.6rem; /* space for the underline */
}

/* slim glowing underline below each section title */
.split-description h3::after {
  content: "";
  display: block;
  width: clamp(2.4rem, 6vw, 4.2rem);
  height: 6px;
  margin: 0.45rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(calc(var(--active-color) + 10) 90% 70%), hsl(calc(var(--active-color) - 30) 85% 70%));
  filter: saturate(140%);
  opacity: 0.95;
  box-shadow: 0 6px 22px hsl(calc(var(--active-color) + 10) 85% 60% / 0.28);
  pointer-events: none;
  transform-origin: center;
  transition: opacity .24s ease, transform .4s cubic-bezier(.4,.8,.25,1), background .4s cubic-bezier(.4,.8,.25,1);
  -webkit-transition: opacity .24s ease, -webkit-transform .4s cubic-bezier(.4,.8,.25,1), -webkit-background .4s cubic-bezier(.4,.8,.25,1);
  transform: scaleX(1);
  will-change: transform, opacity;
  -webkit-transform: scaleX(1);
}

/* Underline expansion when a related image (product-half) is clicked */
.split-showcase.underline-extended .split-description h3::after {
  transform: scaleX(2.1);
}

.split-description p { 
  color: hsl(220 15% 85% / 0.88);
  font-weight: 400;
}

/* Scroll entrance animation */
.split-showcase { opacity: 0; transform: translateY(40px); animation: splitFadeIn .9s cubic-bezier(.3,.8,.25,1) forwards; }
.split-showcase { transform: translateY(40px); animation: splitFadeIn .9s cubic-bezier(.3,.8,.25,1) forwards; -webkit-transform: translateY(40px); -webkit-animation: splitFadeIn .9s cubic-bezier(.3,.8,.25,1) forwards; will-change: transform, opacity; }
.split-showcase:nth-of-type(2) { animation-delay: .12s; }
.split-showcase:nth-of-type(3) { animation-delay: .22s; }
.split-showcase:nth-of-type(4) { animation-delay: .32s; }
.split-showcase:nth-of-type(5) { animation-delay: .42s; }

@keyframes splitFadeIn { to { opacity: 1; transform: translateY(0); } }
@-webkit-keyframes splitFadeIn { to { opacity: 1; -webkit-transform: translateY(0); } }

/* Safari-specific containment tweak: Safari has bugs with contain: paint blocking smooth child transitions */
@supports (-webkit-hyphens:none) {
  .pair-frame { contain: layout style; }
}

/* Responsive */
@media (max-width: 980px) {
  .split-pair { gap: clamp(.75rem, 3vw, 1.1rem); }
}

/* Ultra narrow phones: finally stack */
@media (max-width: 500px) {
  .split-pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .product-half img, .split-showcase { transition: none !important; animation: none !important; }
  .split-description h3::after { transition: none !important; filter: none !important; }
}