/* ═══════════════════════════════════════════════════════════════
   CUBE MISSION SECTION — fully scoped, zero conflict with volga.css
   All selectors prefixed with .cube-mission-wrap
   No global resets, no body/html overrides
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens (local only) ──────────────────────────────────────── */
.cube-mission-wrap {
  --cm-dark-bg: #F5F8FA;
  --cm-fg: #013350;
  --cm-muted: #6E8A9B;
  --cm-accent: #DC950A;
  --cm-accent-2: #F35F37;
  --cm-card-bg: #ffffff;
  --cm-card-border: rgba(1, 51, 80, 0.18);
  --cm-hairline: 0.0625rem;
  --cm-font-display:  "Sora", sans-serif;  
  --cm-font-body:'Inter', sans-serif;
  --cm-reveal-offset: 0.625rem;
  --cm-reveal-dur: 0.5s;
}

/* ── Outer wrapper — the section that sits in the page flow ───── */
.cube-mission-wrap {
  position: relative;
  width: 100%;
  height: 130vh;
  background-color: var(--cm-dark-bg);
  background-image:
    linear-gradient(rgba(1, 51, 80, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 51, 80, 0.08) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px;
  animation: cm-grid-move 6s linear infinite;
  overflow: hidden;
  padding: 5rem 5rem 4rem 5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}


@keyframes cm-grid-move {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 0 -50px, -50px 0;
  }
}

/* ── Section label strip above ───────────────────────────────── */
.cube-mission-header {
  padding: 4rem 5rem 0;
  position: relative;
  z-index: 10;
}

.cube-mission-kicker {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cm-fg);
  font-family: var(--cm-font-body);
  margin-bottom: 0rem;
}
.cube-mission-title {
  font-family: var(--cm-font-display);
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  color: var(--cm-fg);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin: 0.75rem 0 0.5rem 0;
}
.cube-mission-desc {
  max-width: 600px;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(1, 51, 80, 0.75);
  font-family: var(--cm-font-body);
  margin: 0;
  padding-top: 0.5rem;
}

/* ── Inner viewport — clips the experience ───────────────────── */
.cube-mission-viewport {
  position: relative;
  width: 100%;
  height: 100vh;        /* one screenful tall                    */
  overflow: hidden;     /* hides the inner scroll from the page  */
}

/* ── Fixed-inside-viewport scene (cube lives here) ───────────── */
.cube-mission-scene {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1900px; /* Increased for more depth */
  pointer-events: none;
  z-index: 0;
}

/* 3D Particles */
#cm-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: inherit;
  z-index: 0;
}

.cm-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--cm-accent);
  border-radius: 50%;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cm-particle-large {
  width: 8px;
  height: 8px;
  opacity: 0.7;
}

.cm-particle-small {
  width: 2px;
  height: 2px;
  opacity: 0.25;
}

/* ── The inner scroll container ──────────────────────────────── */
.cube-mission-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* hide scrollbar visually but keep it functional */
  scrollbar-width: none;
  -ms-overflow-style: none;
  z-index: 2;
}
.cube-mission-scroll::-webkit-scrollbar {
  display: none;
}

/* ── CUBE ─────────────────────────────────────────────────────── */
#cm-cube {
  --s: min(60vw, 60vh, 560px); /* Increased cube size */
  width: var(--s);
  height: var(--s);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transform: rotateX(90deg) rotateY(0deg);
  will-change: transform;
  pointer-events: none;
  z-index: 1;
}

.cm-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  background:
    repeating-linear-gradient(0deg,
      rgba(1,51,80,0.035) 0,rgba(1,51,80,0.035) 1px,
      transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg,
      rgba(1,51,80,0.035) 0,rgba(1,51,80,0.035) 1px,
      transparent 1px, transparent 48px),
    #FDFCF9;
  border: 1px solid rgba(220, 149, 10, 0.3);
  transform-style: preserve-3d;
}
.cm-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(1,51,80,0.12) 100%);
  z-index: 2;
  pointer-events: none;
}
.cm-face::after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(220, 149, 10, 0.35);
  z-index: 3;
  pointer-events: none;
  border-radius: 4px;
}
.cm-face img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  object-fit: cover;
  display: block;
  transform: translate(-50%, -50%) translateZ(20px);
  box-shadow: 
    0 0 20px rgba(1,51,80,0.18),
    0 0 40px rgba(1,51,80,0.1),
    0 10px 30px rgba(1,51,80,0.22);
  filter: saturate(1.15) contrast(1.08) brightness(1.02);
  border-radius: 6px;
}
.cm-face-ph {
  position: absolute;
  bottom: 1.5rem;
  left: 1.75rem;
  font-family: var(--cm-font-display);
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  letter-spacing: 0.04em;
  color: rgba(1,51,80,0.08);
  pointer-events: none;
  user-select: none;
}

.cm-face[data-face="front"]  { transform: translateZ(calc(var(--s)/2)); }
.cm-face[data-face="back"]   { transform: rotateY(180deg) translateZ(calc(var(--s)/2)); }
.cm-face[data-face="right"]  { transform: rotateY(90deg)  translateZ(calc(var(--s)/2)); }
.cm-face[data-face="left"]   { transform: rotateY(-90deg) translateZ(calc(var(--s)/2)); }
.cm-face[data-face="top"]    { transform: rotateX(-90deg) translateZ(calc(var(--s)/2)); }
.cm-face[data-face="bottom"] { transform: rotateX(90deg)  translateZ(calc(var(--s)/2)); }

/* ── HUD (scoped inside viewport) ────────────────────────────── */
#cm-hud {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10;
  text-align: right;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--cm-muted);
  text-transform: uppercase;
  font-family: var(--cm-font-body);
  pointer-events: none;
}
.cm-progress-bar {
  width: 7rem;
  height: var(--cm-hairline);
  background: var(--cm-muted);
  margin-block-start: 0.4rem;
  margin-inline-start: auto;
  position: relative;
  overflow: hidden;
}
.cm-progress-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0%;
  background: var(--cm-accent);
  transition: width 0.1s linear;
}
.cm-scene-label {
  font-size: 0.55rem;
  color: var(--cm-accent);
  margin-block-start: 0.35rem;
}

/* ── Scene dot strip ─────────────────────────────────────────── */
#cm-scene-strip {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  translate: 0 -50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cm-dot {
  display: block;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: var(--cm-muted);
  transition: background 0.3s, scale 0.3s;
  cursor: pointer;
  border: none;
  padding: 0;
}
.cm-dot.active {
  background: var(--cm-accent);
  scale: 1.8;
}

/* ── Caption ─────────────────────────────────────────────────── */
#cm-face-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  translate: -50% 0;
  z-index: 10;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
#cm-caption-num {
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  color: var(--cm-accent);
  text-transform: uppercase;
  margin-block-end: 0.12rem;
  font-family: var(--cm-font-body);
}
#cm-caption-name {
  font-family: var(--cm-font-display);
  font-size: clamp(1.4rem, 4vw, 2.8rem);
  letter-spacing: 0.08em;
  color: var(--cm-muted);
  opacity: 0.45;
  line-height: 1;
}

/* ── Slide sections inside inner scroll ─────────────────────── */
.cube-mission-scroll .cm-slide {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 6rem 5rem 6rem 5rem;
  position: relative;
  z-index: 3;
}

/* ── Text cards ──────────────────────────────────────────────── */
.cm-card {
  max-width: 33rem;
  height: 29rem;
  padding: 2rem 1.75rem;
  background: linear-gradient(135deg, var(--cm-card-bg) 0%, rgba(1, 51, 80, 0.06) 100%);
  border-left: var(--cm-hairline) solid var(--cm-card-border);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  font-family: var(--cm-font-body);
  position: relative;
  box-shadow: 
    0 8px 16px rgba(1, 51, 80, 0.15),
    0 20px 40px rgba(1, 51, 80, 0.2),
    0 40px 80px rgba(1, 51, 80, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 40px rgba(1, 51, 80, 0.03);
  transform: translateZ(0) perspective(1000px);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  border-radius: 8px;
  overflow: hidden;
}

.cm-card.right {
  margin-inline-start: auto;
  border-left: none;
  border-right: var(--cm-hairline) solid var(--cm-card-border);
  text-align: right;
}
.cm-card.right .cm-h-line { transform-origin: right; margin-inline-start: auto; }
.cm-card.center {
  margin-inline: auto;
  border-left: none;
  border-top: var(--cm-hairline) solid var(--cm-card-border);
  text-align: center;
  max-width: 35rem;
}
.cm-card.center .cm-h-line { transform-origin: center; margin-inline: auto; }

.cm-tag {
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cm-accent);
  margin-block-end: 1rem;
  font-family: var(--cm-font-body);
}
.cm-card h2 {
  /* override any volga h2 styles with high specificity */
  font-family: var(--cm-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  line-height: 0.92 !important;
  font-size: clamp(2rem, 4.5vw, 3.5rem) !important;
  color: var(--cm-fg) !important;
  margin: 0 !important;
}
.cm-card h1 {
  font-family: var(--cm-font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
  letter-spacing: 1px !important;
  line-height: 0.92 !important;
  color: var(--cm-fg) !important;
  margin: 0 !important;
}
.cm-body {
  font-size: 0.96rem;
  line-height: 1.8;
  color: rgba(1, 51, 80, 0.85);
  margin-block-start: 1.1rem;
  font-family: var(--cm-font-body);
}
.cm-stat-row {
  display: flex;
  gap: 2rem;
  margin-block-start: 1.75rem;
  flex-wrap: wrap;
}
.cm-stat { display: flex; flex-direction: column; gap: 0.12rem; }
.cm-stat-num {
  font-family: var(--cm-font-display);
  font-size: 2rem;
  color: var(--cm-accent);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.cm-stat-label {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cm-muted);
  font-family: var(--cm-font-body);
}
.cm-h-line {
  width: 3rem;
  height: var(--cm-hairline);
  background: linear-gradient(90deg, transparent, var(--cm-accent), transparent);
  margin-block-end: 1.1rem;
  transform-origin: left;
}
.cm-cta-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-block-start: 1.5rem;
}
.cm-card.right .cm-cta-row { justify-content: flex-end; }

.cm-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border: var(--cm-hairline) solid #013350;
  color: #013350;
  font-family: var(--cm-font-body);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: background 0.2s, color 0.2s;
  border-radius: 4px;
}
.cm-cta:hover { 
  background: #013350; 
  color: var(--cm-dark-bg); 
}

.cm-cta-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border: var(--cm-hairline) solid rgba(1,51,80,0.35);
  color: var(--cm-muted);
  font-family: var(--cm-font-body);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  border-radius: 4px;
}
.cm-cta-back:hover {
  background: rgba(1,51,80,0.08);
  border-color: var(--cm-muted);
  color: var(--cm-fg);
}

/* Card hover effect for more depth */
.cm-card:hover {
  box-shadow: 
    0 35px 90px rgba(1, 51, 80, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 60px rgba(1, 51, 80, 0.04);
  transform: translateY(-8px) perspective(1000px) rotateX(2deg);
}
.cm-cta svg { width: 0.65rem; height: 0.65rem; }
.cm-cta-back svg { width: 0.65rem; height: 0.65rem; }

/* ── Reveal animations (scoped) ──────────────────────────────── */
.cm-card .cm-tag,
.cm-card h1,
.cm-card h2,
.cm-card .cm-body,
.cm-card .cm-stat-row,
.cm-card .cm-cta,
.cm-card .cm-cta-back {
  opacity: 0;
  translate: 0 var(--cm-reveal-offset);
}
.cm-card h1, .cm-card h2 {
  translate: 0 1rem;
  transition: opacity var(--cm-reveal-dur) ease 0.08s,
              translate var(--cm-reveal-dur) ease 0.08s;
}
.cm-card .cm-tag {
  transition: opacity var(--cm-reveal-dur) ease,
              translate var(--cm-reveal-dur) ease;
}
.cm-card .cm-body {
  transition: opacity var(--cm-reveal-dur) ease 0.2s,
              translate var(--cm-reveal-dur) ease 0.2s;
}
.cm-card .cm-stat-row {
  transition: opacity var(--cm-reveal-dur) ease 0.3s,
              translate var(--cm-reveal-dur) ease 0.3s;
}
.cm-card .cm-cta,
.cm-card .cm-cta-back {
  transition: opacity var(--cm-reveal-dur) ease 0.35s,
              translate var(--cm-reveal-dur) ease 0.35s,
              background 0.2s, color 0.2s, border-color 0.2s;
}
.cm-h-line {
  opacity: 0;
  scale: 0 1;
  transition: opacity 0.4s ease, scale 0.4s ease;
}

/* visible state */
.cm-card.cm-in .cm-tag,
.cm-card.cm-in h1,
.cm-card.cm-in h2,
.cm-card.cm-in .cm-body,
.cm-card.cm-in .cm-stat-row,
.cm-card.cm-in .cm-cta,
.cm-card.cm-in .cm-cta-back { opacity: 1; translate: 0 0; }
.cm-card.cm-in .cm-h-line   { opacity: 1; scale: 1 1; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cube-mission-wrap {
    padding: 3.5rem 2.5rem 3rem;
    height: 135vh;
  }
  .cube-mission-header {
    padding: 0 0 1.5rem;
  }
  .cube-mission-scroll .cm-slide {
    padding: 3rem 2rem;
  }
  #cm-cube { --s: min(55vw, 55vh, 400px); }
}

@media (max-width: 768px) {
  .cube-mission-wrap {
    padding: 2.5rem 1.25rem 2rem;
    height: 140vh;
  }
  .cube-mission-header {
    padding: 0 0.5rem 1rem;
  }
  .cube-mission-title {
    font-size: clamp(1.6rem, 5.5vw, 2.2rem);
  }
  .cube-mission-desc {
    font-size: 0.9rem;
    line-height: 1.6;
  }
  .cube-mission-viewport {
    height: 86vh;
  }
  .cube-mission-scene {
    height: 86vh;
  }
  .cube-mission-scroll .cm-slide { 
    padding: 2.5rem 0.75rem; 
    align-items: flex-end; 
  }
  #cm-scene-strip { display: none; }
  #cm-hud {
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.35rem 0.65rem;
  }
  .cm-card, .cm-card.right, .cm-card.center {
    max-width: 100%;
    height: auto;
    min-height: auto;
    padding: 1.25rem 1.1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(1, 51, 80, 0.12);
  }
  .cm-card h1, .cm-card h2 {
    font-size: clamp(1.35rem, 5.2vw, 1.8rem) !important;
  }
  .cm-body {
    font-size: 0.88rem;
    line-height: 1.55;
  }
  #cm-cube { --s: min(58vw, 40vh, 280px); }
  #cm-face-caption {
    bottom: 0.75rem;
  }
}

@media (max-width: 480px) {
  .cube-mission-wrap {
    padding: 2rem 0.75rem 1.5rem;
    height: 145vh;
  }
  .cube-mission-viewport {
    height: 82vh;
  }
  .cube-mission-scene {
    height: 82vh;
  }
  .cube-mission-scroll .cm-slide {
    padding: 1.5rem 0.5rem;
  }
  .cm-card, .cm-card.right, .cm-card.center {
    padding: 1rem 0.9rem;
    border-radius: 14px;
  }
  .cm-card h1, .cm-card h2 {
    font-size: clamp(1.22rem, 5vw, 1.5rem) !important;
  }
  .cm-body {
    font-size: 0.82rem;
    line-height: 1.5;
  }
  #cm-cube { --s: min(52vw, 34vh, 210px); }
  .cm-cta-row {
    margin-top: 0.85rem;
    gap: 0.5rem;
  }
  .cm-cta, .cm-cta-back {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
  }
}

/* ── Respect reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cm-card .cm-tag,
  .cm-card h1, .cm-card h2,
  .cm-card .cm-body,
  .cm-card .cm-stat-row,
  .cm-card .cm-cta,
  .cm-card .cm-cta-back,
  .cm-h-line {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 1 !important;
    transition: none !important;
  }
}