/* ==========================================================================
   solution-isometric-hero.css
   CBC SOLUTION HERO — shared flat-rust isometric system (10 pages)

   Renamed from operations-isometric-hero.css. The Operations hero remains the
   approved appearance/timing reference: its geometry, phase windows and
   keyframes are carried here byte-identical, still scoped to
   .enthero--operations-isometric, so that page cannot be altered.

   ARCHITECTURE
     .enthero--iso   shared rust surface, white typography and the isometric
                     paint roles (gradient-black side faces, slate faces,
                     white outlines, white caps, white dashed feeders).
     .opiso-el       shared entrance engine for the nine other pages. One
                     smooth phased build, slightly slow, one iteration, both
                     fill, then settled for ever. Variants pick the movement
                     (--rise --grow --fade --pop); per-object timing is an
                     inline `--d` delay only, so each page contributes
                     geometry and choreography, never CSS.

   Reduced motion resolves every element to its finished state statically.
   The figure itself is hidden at <= 900px by the shared enthero rule, so the
   mobile treatment is identical on all ten pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared surface, typography and paint roles
   -------------------------------------------------------------------------- */
.enthero--iso.enthero--theme-flat-rust .enthero__eyebrow,
.enthero--iso.enthero--theme-flat-rust .enthero__copy h1,
.enthero--iso.enthero--theme-flat-rust .enthero__lede {
  color: #ffffff;
}

.enthero--iso .enthero__figure svg {
  overflow: visible;
}

.enthero--iso {
  background: #a64a40;
  background-image: none;
}

.enthero--iso::before,
.enthero--iso::after {
  display: none;
}

.enthero--iso .opiso__line,
.enthero--iso .opiso__dash {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.enthero--iso .opiso__line--heavy {
  stroke-width: 2.6;
}

.enthero--iso .opiso__dash {
  stroke-width: 2.2;
  stroke-dasharray: 10 7;
}

.enthero--iso .opiso__dot {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-dasharray: 2 6.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.enthero--iso .opiso__black {
  fill: url("#ops-gradient-black");
  stroke: none;
}

.enthero--iso .opiso__slate {
  fill: #667580;
  stroke: none;
}

.enthero--iso .opiso__cap,
.enthero--iso .opiso__endpoint {
  fill: #fff;
  stroke: none;
}

/* --------------------------------------------------------------------------
   2. Shared entrance engine (nine pages; Operations keeps its own block)
   -------------------------------------------------------------------------- */
.enthero--iso .opiso-el {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 1000ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-delay: var(--d, 0ms);
}

.enthero--iso .opiso-el--rise {
  animation-name: opiso-rise;
}

.enthero--iso .opiso-el--grow {
  transform-origin: center bottom;
  animation-name: opiso-grow;
}

.enthero--iso .opiso-el--fade {
  animation-duration: 900ms;
  animation-name: opiso-fade;
}

.enthero--iso .opiso-el--pop {
  animation-duration: 700ms;
  animation-name: opiso-pop;
}

@keyframes opiso-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opiso-grow {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes opiso-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes opiso-pop {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .enthero--iso .opiso-el {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   3. Operations page — approved reference choreography (unchanged)
   -------------------------------------------------------------------------- */
.enthero--operations-isometric .opiso__input {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: opiso-input-1 5s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}

.enthero--operations-isometric .opiso__input--2 {
  animation-name: opiso-input-2;
}

.enthero--operations-isometric .opiso__input--3 {
  animation-name: opiso-input-3;
}

.enthero--operations-isometric .opiso__feeder path {
  opacity: 0;
  animation: opiso-line-1 5s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
}

.enthero--operations-isometric .opiso__feeder--2 path {
  animation-name: opiso-line-2;
}

.enthero--operations-isometric .opiso__feeder--3 path {
  animation-name: opiso-line-3;
}

.enthero--operations-isometric .opiso__endpoint {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: opiso-end-1 5s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}

.enthero--operations-isometric .opiso__feeder--2 .opiso__endpoint {
  animation-name: opiso-end-2;
}

.enthero--operations-isometric .opiso__feeder--3 .opiso__endpoint {
  animation-name: opiso-end-3;
}

.enthero--operations-isometric .opiso__platform {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: opiso-platform 5s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}

.enthero--operations-isometric .opiso__tower {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: opiso-tower-1 5s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}

.enthero--operations-isometric .opiso__tower--2 {
  animation-name: opiso-tower-2;
}

.enthero--operations-isometric .opiso__tower--3 {
  animation-name: opiso-tower-3;
}

@keyframes opiso-input-1 {
  0%, 2% { opacity: 0; transform: translateY(10px); }
  18%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes opiso-input-2 {
  0%, 5% { opacity: 0; transform: translateY(10px); }
  21%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes opiso-input-3 {
  0%, 8% { opacity: 0; transform: translateY(10px); }
  24%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes opiso-line-1 {
  0%, 22% { opacity: 0; }
  38%, 100% { opacity: 1; }
}

@keyframes opiso-line-2 {
  0%, 25% { opacity: 0; }
  41%, 100% { opacity: 1; }
}

@keyframes opiso-line-3 {
  0%, 28% { opacity: 0; }
  44%, 100% { opacity: 1; }
}

@keyframes opiso-end-1 {
  0%, 35% { opacity: 0; transform: scale(0.55); }
  42%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes opiso-end-2 {
  0%, 38% { opacity: 0; transform: scale(0.55); }
  45%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes opiso-end-3 {
  0%, 41% { opacity: 0; transform: scale(0.55); }
  48%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes opiso-platform {
  0%, 48% { opacity: 0; transform: translateY(14px); }
  67%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes opiso-tower-1 {
  0%, 65% { opacity: 0; transform: translateY(16px); }
  80%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes opiso-tower-2 {
  0%, 74% { opacity: 0; transform: translateY(16px); }
  90%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes opiso-tower-3 {
  0%, 84% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .enthero--operations-isometric .opiso__input,
  .enthero--operations-isometric .opiso__feeder path,
  .enthero--operations-isometric .opiso__endpoint,
  .enthero--operations-isometric .opiso__platform,
  .enthero--operations-isometric .opiso__tower {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}