/* ── Hero Scale Scene ─────────────────────────────────────────────────────── */

.gans-hero-scale {
  position: relative;
}

/* 280vh scroll track — creates the scroll room */
.gans-hero-scale__track {
  height: 280vh;
  position: relative;
}

/* Sticky panel — stays in viewport while track scrolls */
.gans-hero-scale__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* clip children so the sweep circle never bleeds outside */
  clip-path: inset(0);
}

/* ── Layer A: video hero + heading/subtitle/stats content ─────────────────── */

.gans-hero-scale__layer-a {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.gans-hero-scale__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gans-hero-scale__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gans-hero-scale__overlay-gold {
  position: absolute;
  inset: 0;
  background: rgba(200, 169, 119, 0.18);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.gans-hero-scale__overlay-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  background: linear-gradient(
    to right,
    var(--cloud, #ffffff) 0%,
    var(--cloud, #ffffff) 38%,
    rgba(255, 255, 255, 0.92) 52%,
    rgba(255, 255, 255, 0.55) 72%,
    rgba(255, 255, 255, 0) 95%
  );
}

.gans-hero-scale__overlay-fade-mobile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--cloud, #ffffff) 0%,
    var(--cloud, #ffffff) 44%,
    rgba(255, 255, 255, 0.6) 58%,
    rgba(255, 255, 255, 0.6) 68%,
    var(--cloud, #ffffff) 84%,
    var(--cloud, #ffffff) 100%
  );
}

@media (min-width: 768px) {
  .gans-hero-scale__overlay-fade        { display: block; }
  .gans-hero-scale__overlay-fade-mobile { display: none; }
}

/* ── Content: heading / subtitle / stats ─────────────────────────────────── */

.gans-hero-scale__content {
  position: relative;
  z-index: 1;
  height: 100%;
}

.gans-hero-scale__inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  padding: 11rem 2rem 6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .gans-hero-scale__inner {
    padding: 13rem 3rem 6rem;
  }
}

.gans-hero-scale__body {
  max-width: 70rem;
}

.gans-hero-scale__heading {
  font-family: var(--font-suisse, sans-serif);
  font-size: clamp(2.75rem, 7vw, 4.25rem);
  font-weight: 300;
  line-height: 0.98;
  color: var(--stone, #444444);
  text-wrap: balance;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  animation: gans-hero-scale-fadein 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@media (max-width: 1440px) {
  .gans-hero-scale__heading {
    font-size: 56px;
  }
}

.gans-hero-scale__heading strong {
  font-weight: 500;
  color: var(--gold, #c8a977);
}

.gans-hero-scale__subtitle {
  margin: 2rem 0 0;
  max-width: 620px;
  font-family: var(--font-suisse, sans-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--stone, #444444);
  opacity: 0;
  transform: translateY(8px);
  animation: gans-hero-scale-fadein 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.95s forwards;
}

.gans-hero-scale__stats {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  opacity: 0;
  animation: gans-hero-scale-fadein 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}

@media (min-width: 640px) {
  .gans-hero-scale__stats { gap: 3rem; }
}

@media (min-width: 768px) {
  .gans-hero-scale__stats { gap: 4rem; }
}

.gans-hero-scale__stat {
  display: flex;
  flex-direction: column;
}

.gans-hero-scale__stat-number {
  font-family: var(--font-suisse, sans-serif);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 300;
  line-height: 1;
  color: var(--stone, #444444);
}

.gans-hero-scale__stat-label {
  margin-top: 0.5rem;
  font-family: var(--font-suisse, sans-serif);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--stone, #444444);
  opacity: 0.6;
}

@keyframes gans-hero-scale-fadein {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gans-hero-scale__heading,
  .gans-hero-scale__subtitle,
  .gans-hero-scale__stats {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Layer B: static white fill — expands from right edge ────────────────── */

.gans-hero-scale__layer-b {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: var(--cloud, #ffffff);
  transform-origin: 100% 50%;
  transform: scaleX(0);
  will-change: transform;
}

/* ── Layer C: rounded sweep circle ──────────────────────────────────────── */

.gans-hero-scale__layer-c {
  position: absolute;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  transform: translateX(100%);
  visibility: hidden; /* JS shows it only when sweep starts */
  will-change: transform;
}

.gans-hero-scale__sweep-circle {
  position: absolute;
  /* Large circle, anchored to right side, centered vertically */
  top: 50%;
  right: -30vw;
  width: 200vh;
  height: 200vh;
  margin-top: -100vh;
  border-radius: 50%;
  background: var(--cloud, #ffffff);
  transform-origin: center center;
  /* scaleY driven by JS */
  will-change: transform;
}

/* ── Layer D: word reveal text ──────────────────────────────────────────── */

.gans-hero-scale__layer-d {
  position: absolute;
  inset: 0;
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 2rem;
  /* starts invisible — JS fades in at scroll 45%–48% */
  opacity: 0;
  will-change: opacity;
}

/* ── Layer C2: brand pattern watermark ──────────────────────────────────── */

.gans-hero-scale__layer-pattern {
  position: absolute;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
  /* starts invisible — JS fades in at scroll 32%–46% (after sweep circle) */
  opacity: 0;
  will-change: opacity;
}

.gans-hero-scale__pattern-img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: min(200vw, 125vh) auto;
  transform: scaleX(-1);
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, transparent 88%),
    linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  mask-image:
    linear-gradient(to right, #000 0%, transparent 88%),
    linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (min-width: 768px) {
  .gans-hero-scale__layer-d {
    padding: 0 3rem;
  }
}

.gans-hero-scale__text-inner {
  width: 100%;
  max-width: 60rem;
}

.gans-hero-scale__copy {
  font-family: var(--font-suisse, sans-serif);
  font-size: clamp(2.5rem, 5.6vw, 4rem);
  font-weight: 300;
  line-height: 1.04;
  margin: 0;
}

.gans-hero-scale__line {
  display: block;
}

/* Words start dim, JS animates color to full */
.gans-hero-scale__word {
  display: inline;
  color: rgba(42, 42, 42, 0.20);
  transition: color 0ms linear; /* JS sets inline color directly */
  white-space: pre;
}

.gans-hero-scale__word::after {
  content: ' ';
}

.gans-hero-scale__word--gold {
  font-weight: 500;
  color: rgba(156, 126, 79, 0.30);
}

/* ── Editor preview ─────────────────────────────────────────────────────── */

.gans-hero-scale-editor {
  background: var(--cloud, #f4f4f3);
  padding: 3rem 2rem;
  border-radius: 4px;
  border: 2px dashed rgba(200, 169, 119, 0.4);
}

.gans-hero-scale-editor__label {
  font-family: monospace;
  font-size: 11px;
  color: rgba(68, 68, 68, 0.5);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.gans-hero-scale-editor__copy {
  font-family: var(--font-suisse, sans-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.04;
  color: var(--stone-deep, #2a2a2a);
  margin: 0;
}

.gans-hero-scale-editor__copy strong {
  font-weight: 500;
  color: var(--gold, #c8a977);
}

/* ── Reduced motion: show all words lit, no animation ────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .gans-hero-scale__layer-b { opacity: 0 !important; transform: scaleX(0) !important; }
  .gans-hero-scale__layer-c { visibility: hidden !important; }
  .gans-hero-scale__layer-d { opacity: 1 !important; }
  .gans-hero-scale__word     { color: rgba(42, 42, 42, 1) !important; }
  .gans-hero-scale__word--gold { color: rgba(200, 169, 119, 1) !important; }
  .gans-hero-scale__track    { height: 100vh; }
}

/* ── Dark theme ───────────────────────────────────────────────────────────
   Sweep circle / static fill become black instead of white, overlays
   fade to black, and the light-on-dark text colours flip accordingly. */

.gans-hero-scale--dark .gans-hero-scale__overlay-gold {
  background: rgba(42, 42, 42, 0.35);
}

.gans-hero-scale--dark .gans-hero-scale__overlay-fade {
  background: linear-gradient(
    to right,
    #2a2a2a 0%,
    #2a2a2a 38%,
    rgba(42, 42, 42, 0.92) 52%,
    rgba(42, 42, 42, 0.55) 72%,
    rgba(42, 42, 42, 0) 95%
  );
}

.gans-hero-scale--dark .gans-hero-scale__overlay-fade-mobile {
  background: linear-gradient(
    to bottom,
    #2a2a2a 0%,
    #2a2a2a 44%,
    rgba(42, 42, 42, 0.6) 58%,
    rgba(42, 42, 42, 0.6) 68%,
    #2a2a2a 84%,
    #2a2a2a 100%
  );
}

.gans-hero-scale--dark .gans-hero-scale__heading,
.gans-hero-scale--dark .gans-hero-scale__subtitle,
.gans-hero-scale--dark .gans-hero-scale__stat-number,
.gans-hero-scale--dark .gans-hero-scale__stat-label {
  color: var(--cloud, #ffffff);
}

.gans-hero-scale--dark .gans-hero-scale__layer-b,
.gans-hero-scale--dark .gans-hero-scale__sweep-circle {
  background: var(--stone-deep, #2a2a2a);
}

.gans-hero-scale--dark .gans-hero-scale__copy,
.gans-hero-scale--dark .gans-hero-scale-editor__copy {
  color: var(--cloud, #ffffff);
}