/* ═══════════════════════════════════════════════════════════════
   absolut.css — Absolut "Winter is Coming" project page
   Layout: centered text + full-width image below each section
   (mirrors Bambu Lab / Apple product page pattern)
   ═══════════════════════════════════════════════════════════════ */


/* ─── SHARED MAX-WIDTH — consistent across all sections ─────── */
.ab-statement-inner,
.ab-panel-inner,
.ab-cinematic-inner {
  max-width: 1400px;
  margin: 0 auto;
}


/* ─── 02 STATEMENT ──────────────────────────────────────────── */
.ab-statement {
  background: var(--dark);

  padding: clamp(5rem, 9vw, 8rem) var(--gutter) clamp(5rem, 9vw, 8rem);
}

.ab-statement-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.ab-statement-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  --gy: 50vh;
  filter: drop-shadow(0 0 32px oklch(0.65 0.22 220 / 0.15));
}

/* Small descriptor + large display — share the same ice gradient,
   animated by GSAP ScrollTrigger via --gy on the parent. */
.ab-st-line1,
.ab-st-line2 {
  background-image: radial-gradient(
    in oklch circle at 50% var(--gy),
    oklch(0.96 0.06 200)        0vh,
    oklch(0.75 0.22 220)       50vh,
    oklch(0.42 0.20 265)       90vh,
    oklch(0.15 0.07 260 / 0)  150vh
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ab-st-line1 {
  font-size: clamp(28px, 3.5vw, 50px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ab-st-line2 {
  font-size: clamp(86px, 12vw, 170px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.ab-statement-body {
  max-width: 900px;
}
.ab-statement-body p {
  font-size: var(--t-body-lg);
  line-height: 1.75;
  color: rgba(255,255,255,0.5);
}
.ab-statement-body p + p { margin-top: 1rem; }


/* ─── PANELS (03 & 04) — centered text above, image below ────
   contain:paint + overflow:hidden on the media wrapper is the
   definitive GPU compositor bleed fix for rounded-corner images. */
.ab-panel {
  background: var(--dark);

  padding: clamp(4rem, 7vw, 7rem) var(--gutter);
}

.ab-panel-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 4rem);
}

/* Centered text block */
.ab-panel-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
}

.ab-panel-text .accent-line {
  height: 2px;
  width: 32px;
  background: var(--accent);
  border-radius: 1px;
}
.ab-panel-text .label { display: block; }

.ab-panel-title {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
  max-width: 900px;
}

.ab-panel-body {
  font-size: var(--t-body-lg);
  line-height: 1.75;
  color: rgba(255,255,255,0.5);
  margin: 0;
  max-width: 800px;
}

/* Image — rounded corners, GPU bleed fixed */
.ab-panel-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  contain: paint;
  aspect-ratio: 21 / 9;
  background: var(--charcoal);
}
.ab-panel-media:not(.ab-compare) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


/* ─── COMPARE SLIDER ──────────────────────────────────────────
   Drag / swipe the handle to reveal clay vs. final render.
   .ab-compare-clip clips the top image; JS sets its width%.
   .ab-compare-top is pinned to container width (not clip width)
   so both images stay in identical position. ─────────────────── */
.ab-compare {
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}

.ab-compare-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* clip-path approach: top image is always full-size,
   JS updates inset() right edge to reveal/hide it.
   No wrapper or width-sync needed. */
.ab-compare-top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  clip-path: polygon(0 0, 43% 0, 57% 100%, 0 100%);
  z-index: 1;
}

.ab-compare-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.ab-compare-handle-line {
  position: absolute;
  /* 120% height + centred so the rotated line covers full container
     height; the media wrapper's overflow:hidden clips the excess. */
  height: 120%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
  width: 1.5px;
  background: rgba(255,255,255,0.75);
}

.ab-compare-handle-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
}

/* Smooth ease back to 50/50 on cursor leave */
.ab-compare--resetting .ab-compare-top {
  transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.ab-compare--resetting .ab-compare-handle {
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─── 05 CINEMATIC FRAME ─────────────────────────────────────── */
.ab-cinematic {

  background: var(--dark);
  padding: clamp(4rem, 7vw, 7rem) var(--gutter);
}

.ab-cinematic-inner {
  border-radius: 12px;
  overflow: hidden;
  contain: paint;
  aspect-ratio: 21 / 9;
  background: var(--charcoal);
}

.ab-cinematic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}


/* ─── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ab-panel-media { aspect-ratio: 16 / 9; }
  .ab-cinematic-inner { aspect-ratio: 16 / 9; }
}