/* ============================================================
   SWFT 3D Cube — six-face image slideshow cube.
   Pair with js/swft-cube.js. Markup contract in docs/SWFT_CUBE.md.
   Pure CSS 3D transforms; no libraries.
   ============================================================ */

.swft-cube {
  --cube-size: min(64vw, 320px);
  --cube-half: calc(var(--cube-size) / 2);
  --cube-accent: var(--swft-accent, #56b4e9);
  --cube-radius: 14px;

  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}

.swft-cube__scene {
  width: calc(var(--cube-size) * 1.5);
  max-width: 100%;
  height: calc(var(--cube-size) * 1.5);
  display: grid;
  place-items: center;
  perspective: calc(var(--cube-size) * 3.2);
  cursor: grab;
  /* The cube owns horizontal + vertical swipes. Set data-vertical-swipe="false"
     on .swft-cube to let vertical swipes scroll the page instead. */
  touch-action: none;
}

.swft-cube[data-vertical-swipe="false"] .swft-cube__scene {
  touch-action: pan-y;
}

.swft-cube.is-dragging .swft-cube__scene {
  cursor: grabbing;
}

.swft-cube__body {
  position: relative;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Hover / press feedback lives on a wrapper-less scale so it composes with JS rotation */
.swft-cube__scene > .swft-cube__body {
  transition: scale 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.swft-cube.is-hovered .swft-cube__body {
  scale: 1.04;
}

.swft-cube.is-pressed .swft-cube__body {
  scale: 0.97;
}

.swft-cube__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--cube-radius);
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: filter 0.4s ease, border-color 0.4s ease;
  filter: brightness(0.62);
}

.swft-cube__face.is-front {
  filter: none;
  border-color: color-mix(in srgb, var(--cube-accent) 55%, transparent);
}

.swft-cube__face--front  { transform: translateZ(var(--cube-half)); }
.swft-cube__face--right  { transform: rotateY(90deg)  translateZ(var(--cube-half)); }
.swft-cube__face--back   { transform: rotateY(180deg) translateZ(var(--cube-half)); }
.swft-cube__face--left   { transform: rotateY(-90deg) translateZ(var(--cube-half)); }
.swft-cube__face--top    { transform: rotateX(90deg)  translateZ(var(--cube-half)); }
.swft-cube__face--bottom { transform: rotateX(-90deg) translateZ(var(--cube-half)); }

.swft-cube__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.8s ease, transform 4.5s ease-out;
  pointer-events: none;
  -webkit-user-drag: none;
}

.swft-cube__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Glowing glass variant (.swft-cube--glow) ----------
   A clear glass cube lit from within: sharp, square corners, crisp photos
   behind a faint inner sheen. Pair with the ocean stage for the outer glow. */
.swft-cube--glow {
  --cube-radius: 0px;
}

.swft-cube--glow .swft-cube__face {
  background: rgba(120, 180, 230, 0.08);
  filter: brightness(0.78);
}

.swft-cube--glow .swft-cube__face.is-front {
  filter: none;
}

/* Glass sheen: a light diagonal reflection across each pane, no frost */
.swft-cube--glow .swft-cube__face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 35%, rgba(255, 255, 255, 0) 60%, rgba(170, 215, 255, 0.1) 100%);
}

/* Face label + per-face slide progress, painted on the face itself */
.swft-cube__face-label {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font: 600 0.75rem/1 var(--swft-font, "Inter Tight", Inter, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.swft-cube__face-pips {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: flex;
  gap: 4px;
}

.swft-cube__face-pips span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}

.swft-cube__face-pips span.is-active {
  background: var(--cube-accent);
}

/* ---------- HUD: label, rotate buttons, slide dots ---------- */
.swft-cube__hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  color: var(--swft-text, #f0eeec);
  font-family: var(--swft-font, "Inter Tight", Inter, sans-serif);
}

.swft-cube__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.swft-cube__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.swft-cube__btn:hover,
.swft-cube__btn:focus-visible {
  border-color: var(--cube-accent);
  color: var(--cube-accent);
  outline: none;
}

.swft-cube__current {
  min-width: 9ch;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.swft-cube__dots {
  display: flex;
  gap: 0.25rem;
}

.swft-cube__dot {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}

.swft-cube__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.2s ease, transform 0.2s ease;
}

.swft-cube__dot[aria-current="true"]::before {
  background: var(--cube-accent);
  transform: scale(1.25);
}

.swft-cube__dot:focus-visible {
  outline: 2px solid var(--cube-accent);
  border-radius: 50%;
}

.swft-cube__hint {
  margin: 0;
  font-size: var(--swft-text-tiny, 0.8125rem);
  color: var(--swft-muted, #b5b5b5);
  text-align: center;
}

.swft-cube:focus-visible .swft-cube__scene {
  outline: 2px solid var(--cube-accent);
  outline-offset: 6px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .swft-cube__slide,
  .swft-cube__face,
  .swft-cube__scene > .swft-cube__body {
    transition: none;
  }
  .swft-cube__slide,
  .swft-cube__slide.is-active {
    transform: none;
  }
}

/* ---------- Demo page shell (cube.html) ---------- */
/* The ocean stage is full-bleed (100vw); clip at the page so it never adds a sideways scroll */
.cube-page {
  overflow-x: clip;
}

.cube-page main {
  padding: clamp(7rem, 12vw, 9rem) 16px 5rem;
}

.cube-page .swft-ocean {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 2.5rem;
}

.cube-page-shell {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

.cube-page-hero {
  text-align: center;
}

.cube-page-eyebrow {
  color: var(--swft-accent, #56b4e9);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--swft-text-tiny, 0.8125rem);
  margin: 0 0 0.75rem;
}

.cube-page-title {
  font-size: var(--swft-h1, clamp(2.25rem, 5vw, 3.5rem));
  line-height: var(--swft-lh-heading, 1.1);
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin: 0 auto 0.75rem;
  color: var(--swft-text-strong, #fff);
}

.cube-page-lead {
  color: var(--swft-lead, #e3e0de);
  margin: 0 auto;
  max-width: 48ch;
  font-size: var(--swft-text-lead, 1.1rem);
  line-height: var(--swft-lh-lead, 1.6);
}