/* Preview I: four small reactions, each tied to an existing piece of meaning. */

/* 1. The original artwork responds within a narrow range. JS writes only the
   two offsets; the page remains composed and the image never drifts on its own. */
.hero__art {
  transform: translate3d(var(--hero-x, 0), var(--hero-y, 0), 0);
  transition: transform 180ms ease-out;
  will-change: transform;
}

.hero__flecks {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__fleck {
  position: absolute;
  width: var(--fleck-size, 4px);
  height: calc(var(--fleck-size, 4px) * 0.58);
  background: #e68aad;
  border-radius: 60% 35% 55% 40%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--fleck-rotate, 0deg));
  animation: fleckOut 720ms cubic-bezier(.2,.7,.2,1) forwards;
}
.hero__fleck--1 { background: rgba(0, 201, 142, 0.82); }
.hero__fleck--2 { background: rgba(95, 142, 230, 0.74); }

@keyframes fleckOut {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(var(--fleck-rotate, 0deg)); }
  18% { opacity: .78; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fleck-x, 16px)), calc(-50% + var(--fleck-y, -24px))) scale(.15) rotate(calc(var(--fleck-rotate, 0deg) + 80deg)); }
}

/* 2. A sparse infrastructure drawing precedes the substation photograph once.
   It is an entrance cue, not another persistent layer. */
.thesis::before {
  transition-delay: 220ms;
  transition-duration: 1.15s;
}

.thesis__wire {
  position: absolute;
  z-index: 0;
  top: 24%;
  right: -8%;
  bottom: -8%;
  width: min(58vw, 880px);
  height: 76%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(0, 201, 142, 0.08));
  -webkit-mask-image: radial-gradient(ellipse 76% 66% at 74% 60%, #000 0%, rgba(0,0,0,.9) 44%, transparent 83%);
          mask-image: radial-gradient(ellipse 76% 66% at 74% 60%, #000 0%, rgba(0,0,0,.9) 44%, transparent 83%);
}

.thesis__wire path,
.thesis__wire rect,
.thesis__wire circle {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.thesis__wire-grid path {
  stroke: rgba(0, 201, 142, 0.5);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.thesis__wire-forms path,
.thesis__wire-forms rect,
.thesis__wire-forms circle {
  stroke: rgba(194, 128, 72, 0.48);
  stroke-width: 1;
  stroke-dasharray: 7 8;
}
.thesis.is-in .thesis__wire { animation: wireResolve 1.35s var(--ease) both; }
.thesis.is-in .thesis__wire-grid path { animation: wireDraw 820ms var(--ease) both; }

@keyframes wireDraw { to { stroke-dashoffset: 0; } }
@keyframes wireResolve {
  0% { opacity: 0; transform: translateX(12px); }
  18% { opacity: .75; }
  58% { opacity: .42; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* 3. Portraits receive one diagnostic pass per deliberate hover. */
@media (hover: hover) and (pointer: fine) {
  .card__plate::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: -18%;
    height: 18%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 201, 142, 0.08) 48%, rgba(0, 201, 142, 0.74) 51%, rgba(255,255,255,.18) 54%, transparent 100%);
    mix-blend-mode: screen;
  }
  .card:hover .card__plate::after { animation: portraitScan 760ms cubic-bezier(.2,.7,.2,1) both; }
}

@keyframes portraitScan {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: .82; }
  82% { opacity: .52; }
  100% { opacity: 0; transform: translateY(650%); }
}

/* 4. The final action sends one pulse down the already-existing focus branch. */
.roots__pulse {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke: rgba(0, 201, 142, 0.9);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: .1 .9;
  stroke-dashoffset: 1;
  opacity: 0;
}
.close.root-active .roots__pulse { animation: rootSignal 920ms cubic-bezier(.2,.7,.2,1) both; }

@keyframes rootSignal {
  0% { opacity: 0; stroke-dashoffset: 1; }
  18% { opacity: .9; }
  78% { opacity: .7; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
  .hero__art { transform: none; transition: none; will-change: auto; }
  .hero__flecks { display: none; }
  .thesis__wire {
    top: 44%;
    right: -48%;
    bottom: -12%;
    width: 124%;
    height: 64%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__art { transform: none; transition: none; will-change: auto; }
  .hero__flecks,
  .thesis__wire,
  .roots__pulse { display: none; }
  .thesis::before { transition-delay: 0s; }
}