/* Reveal-match visual layer for the live Three.js homepage component.
   Loaded after hero-scroll.css so the original approved baseline remains available for rollback. */

.hero-scroll-sequence{
  background:
    radial-gradient(ellipse at 74% 43%,rgba(25,48,49,.3),transparent 34%),
    radial-gradient(ellipse at 88% 72%,rgba(105,54,31,.08),transparent 27%),
    linear-gradient(90deg,transparent 42%,rgba(5,12,13,.24) 67%,rgba(4,8,9,.42));
}

.hero-scroll-sequence::before{
  width:auto;
  height:auto;
  inset:-8% -7% -3% 38%;
  border-radius:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 45% 40%,rgba(70,101,99,.19),transparent 31%),
    radial-gradient(ellipse at 76% 73%,rgba(108,58,34,.07),transparent 26%);
  filter:blur(26px);
  opacity:.9;
}

.hero-scroll-sequence .hero-visual{
  isolation:isolate;
}

.hero-scroll-sequence .hero-visual::before{
  content:"";
  position:absolute;
  inset:3% -5% 0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 49% 44%,rgba(34,70,72,.68),rgba(9,27,29,.72) 42%,rgba(4,13,15,.58) 68%,transparent 88%),
    radial-gradient(ellipse at 24% 20%,rgba(138,159,153,.1),transparent 31%),
    radial-gradient(ellipse at 83% 76%,rgba(126,67,38,.09),transparent 28%);
  filter:blur(16px);
  opacity:.96;
}

.hero-scroll-sequence .hero-visual::after{
  content:"";
  position:absolute;
  inset:5% -1% 1%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 47%,transparent 54%,rgba(2,5,6,.16) 72%,rgba(1,3,4,.46) 100%),
    linear-gradient(90deg,rgba(2,6,7,.18),transparent 24% 76%,rgba(38,20,14,.1));
  mix-blend-mode:multiply;
}

.hero-scroll-sequence .hero-stage{
  width:min(100%,720px);
  max-width:none;
  transform:none;
  isolation:isolate;
}

.hero-scroll-sequence .hero-stage::before{
  inset:8%;
  z-index:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 43% 35%,rgba(142,161,155,.055),transparent 24%),
    radial-gradient(circle at 51% 53%,rgba(39,72,74,.28),rgba(7,24,26,.18) 52%,transparent 78%);
  filter:blur(22px);
  opacity:.8;
}

.hero-scroll-sequence .hero-stage::after{
  content:"";
  position:absolute;
  inset:5%;
  z-index:3;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,transparent 74%,rgba(1,3,4,.07) 91%,rgba(1,2,3,.18) 100%);
}

.hero-scroll-sequence #hero-canvas{
  z-index:2;
  filter:saturate(.96) contrast(1.025);
}

.hero-scroll-sequence .float-card{
  width:142px;
  padding:14px;
  border-color:rgba(139,98,72,.3);
  background:linear-gradient(145deg,rgba(13,20,20,.9),rgba(6,11,12,.82));
  box-shadow:0 18px 54px rgba(0,0,0,.38);
}

.hero-scroll-sequence .float-card-a{left:-6%;top:13%}
.hero-scroll-sequence .float-card-b{right:-5%;top:20%}
.hero-scroll-sequence .float-card-c{left:-7%;bottom:13%}
.hero-scroll-sequence .float-card-d{right:-5%;bottom:10%}

.hero-scroll-sequence .motion-toggle{
  border-color:rgba(126,89,66,.42);
  background:rgba(5,11,12,.86);
}

.hero-scroll-sequence .motion-toggle:disabled{
  cursor:default;
  opacity:.72;
}

.armillary-fallback .fallback-core{
  width:38%;
  background:
    radial-gradient(circle at 29% 24%,rgba(225,231,227,.52),rgba(90,103,101,.18) 12%,transparent 25%),
    radial-gradient(circle at 67% 28%,rgba(196,210,206,.25),transparent 17%),
    radial-gradient(circle at 59% 72%,rgba(115,60,37,.16),transparent 24%),
    radial-gradient(circle at 50% 62%,#0b1112,#040607 68%,#010202);
  box-shadow:0 20px 60px rgba(0,0,0,.46);
}

.armillary-fallback .fallback-ring{
  border-width:1px;
  border-color:rgba(116,79,61,.76);
  box-shadow:none;
}

@media(max-width:1320px){
  .hero-scroll-sequence .hero-stage{width:min(100%,700px)}
  .hero-scroll-sequence .float-card-a{left:-3%}
  .hero-scroll-sequence .float-card-b{right:-2%}
  .hero-scroll-sequence .float-card-c{left:-4%}
  .hero-scroll-sequence .float-card-d{right:-2%}
}

@media(max-width:1180px){
  .hero-scroll-sequence .hero-stage{width:min(100%,670px)}
  .hero-scroll-sequence .float-card{width:136px}
  .hero-scroll-sequence .float-card-a{left:-1%}
  .hero-scroll-sequence .float-card-b{right:-1%}
  .hero-scroll-sequence .float-card-c{left:-2%}
  .hero-scroll-sequence .float-card-d{right:-1%}
}

@media(max-width:899px){
  .hero-scroll-sequence{
    padding-top:18px;
    background:
      radial-gradient(ellipse at 50% 44%,rgba(24,61,64,.45),transparent 34%),
      radial-gradient(ellipse at 83% 54%,rgba(100,52,31,.08),transparent 24%),
      linear-gradient(180deg,rgba(3,13,15,.5),transparent 48%);
  }
  .hero-scroll-sequence::before{
    inset:-2% -14% 52%;
    background:radial-gradient(ellipse at 50% 42%,rgba(62,94,91,.2),transparent 55%);
    filter:blur(20px);
  }
  .hero-scroll-sequence .hero-grid{
    min-height:auto;
    grid-template-columns:1fr;
    align-items:start;
    gap:10px;
  }
  .hero-scroll-sequence .hero-visual{
    order:initial;
    min-height:auto;
    width:100%;
    display:block;
    padding:0;
  }
  .hero-scroll-sequence .hero-copy{
    padding-block:24px 38px;
  }
  .hero-scroll-sequence .hero-visual::before{
    inset:-3% -8% auto;
    height:min(102vw,460px);
  }
  .hero-scroll-sequence .hero-visual::after{
    inset:0 -4% auto;
    height:min(96vw,440px);
  }
  .hero-scroll-sequence .hero-stage{
    --armillary-canvas-size:min(88vw,400px);
    --armillary-header-clearance:64px;
    width:min(100%,440px);
    aspect-ratio:auto;
    margin-inline:auto;
    padding:calc(var(--armillary-canvas-size) + var(--armillary-header-clearance)) 8px 0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .hero-scroll-sequence .hero-stage::before,
  .hero-scroll-sequence .hero-stage::after{
    width:var(--armillary-canvas-size);
    height:var(--armillary-canvas-size);
    inset:var(--armillary-header-clearance) auto auto 50%;
    transform:translateX(-50%);
  }
  .hero-scroll-sequence #hero-canvas{
    inset:var(--armillary-header-clearance) auto auto 50%;
    width:var(--armillary-canvas-size);
    height:var(--armillary-canvas-size);
    transform:translateX(-50%);
    filter:saturate(.96) contrast(1.025);
  }
  .hero-scroll-sequence .float-card,
  .hero-scroll-sequence .float-card-a,
  .hero-scroll-sequence .float-card-b,
  .hero-scroll-sequence .float-card-c,
  .hero-scroll-sequence .float-card-d{
    position:relative;
    inset:auto;
    width:auto;
    min-height:94px;
    padding:11px 12px;
    border-radius:12px;
  }
  .hero-scroll-sequence .float-card strong{
    margin:4px 0;
    font-size:1.06rem;
  }
  .hero-scroll-sequence .float-card span{
    font-size:.54rem;
    line-height:1.45;
  }
  .hero-scroll-sequence .hero-motion-ui{
    position:relative;
    right:auto;
    bottom:auto;
    justify-content:center;
    margin:14px 0 8px;
  }
  .hero-scroll-sequence .proof-strip{margin-top:10px}
}

@media(max-width:560px){
  .hero-scroll-sequence .hero-stage{
    --armillary-canvas-size:min(90vw,380px);
    --armillary-header-clearance:60px;
    width:100%;
    margin-left:0;
  }
  .hero-scroll-sequence .float-card{
    min-height:90px;
  }
}

@media(max-width:390px){
  .hero-scroll-sequence .hero-stage{
    --armillary-canvas-size:88vw;
    --armillary-header-clearance:58px;
    padding-right:4px;
    padding-left:4px;
    gap:6px;
  }
  .hero-scroll-sequence .float-card{
    padding:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-scroll-sequence .hero-stage,
  .hero-scroll-sequence #hero-canvas{
    transition:none!important;
  }
}