/* ============================================================
   DIRO Holdings — fx.css
   Layered depth · 3D parallax · iridescent copper/platinum sheen.
   Additive layer on top of main.css. Everything here is decorative
   and pointer-events:none; the page stays fully usable without it.
   Honours prefers-reduced-motion (all motion parked, layers calm).
   ============================================================ */

:root {
  /* iridescence derived from the existing metal palette — no neon */
  --iris-gold:   #C89A73;   /* warm copper-gold   */
  --iris-champ:  #E8DCC8;   /* champagne platinum */
  --iris-steel:  #8FA9A6;   /* cool steel-platinum (faint green cast) */
  --holo: linear-gradient(115deg,
            rgba(200,154,115,0) 18%,
            rgba(200,154,115,.55) 34%,
            rgba(232,220,200,.85) 47%,
            rgba(143,169,166,.55) 60%,
            rgba(200,154,115,0) 78%);
}

/* pointer position (0 = centre), fed by fx.js; safe defaults */
.hero { --mx: 0; --my: 0; }

/* ------------------------------------------------------------
   HERO — depth stage
   The hero becomes a perspective stage. Decorative layers live in
   .fx-stage (injected by fx.js) and tilt together on pointer move,
   each at its own depth. The content (.hero__inner) stays sharp and
   only drifts a little.
   ------------------------------------------------------------ */
.hero { perspective: 1300px; perspective-origin: 50% 42%; }

.fx-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .35s var(--ease);
}
/* pointer tilt — small, luxe, never dizzying */
.hero.fx-on .fx-stage {
  transform: rotateX(calc(var(--my) * -2.2deg)) rotateY(calc(var(--mx) * 2.6deg));
  transition: none;
}

/* --- layer: perspective grid floor, fading into the dark --- */
.fx-grid {
  position: absolute;
  left: 50%; bottom: -6%;
  width: 190%; height: 78%;
  transform: translateX(-50%) translateZ(-260px) rotateX(74deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(to right, rgba(200,154,115,.16) 1px, transparent 1px),
    linear-gradient(to top,   rgba(201,201,203,.10) 1px, transparent 1px);
  background-size: 68px 68px, 68px 68px;
  -webkit-mask-image: radial-gradient(120% 82% at 50% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
          mask-image: radial-gradient(120% 82% at 50% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 72%);
  opacity: .55;
}

/* --- layer: soft breathing copper glow --- */
.fx-glow {
  position: absolute;
  right: 2%; top: 30%;
  width: 62vw; height: 62vw;
  max-width: 900px; max-height: 900px;
  transform: translateZ(-140px);
  background: radial-gradient(circle at 50% 50%,
              rgba(156,107,71,.30) 0%,
              rgba(156,107,71,.12) 34%,
              transparent 66%);
  filter: blur(8px);
  opacity: .9;
  animation: fxBreathe 11s var(--ease) infinite;
}
.fx-glow--cool {
  left: -14%; right: auto; top: auto; bottom: 4%;
  width: 46vw; height: 46vw; max-width: 640px; max-height: 640px;
  background: radial-gradient(circle at 50% 50%,
              rgba(143,169,166,.16) 0%,
              rgba(143,169,166,.06) 40%,
              transparent 68%);
  animation-duration: 15s; animation-direction: alternate;
}
@keyframes fxBreathe {
  0%,100% { opacity: .55; transform: translateZ(-140px) scale(1); }
  50%     { opacity: .95; transform: translateZ(-140px) scale(1.08); }
}

/* --- the oversized copper O now sits inside the stage, floating deep --- */
.hero .fx-stage .hero__o {
  z-index: 0;
  opacity: .10;
  will-change: transform;
}
/* slow ambient float (parked when reduced motion / combined with JS parallax) */
.hero.fx-on .fx-stage .hero__o { animation: fxFloatO 18s ease-in-out infinite; }
@keyframes fxFloatO {
  0%,100% { filter: none; }
  50%     { filter: drop-shadow(0 0 40px rgba(156,107,71,.25)); }
}

/* --- layer: drifting motes (built by fx.js) --- */
.fx-motes { position: absolute; inset: 0; transform: translateZ(40px); }
.fx-mote {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--iris-champ);
  opacity: 0;
  box-shadow: 0 0 6px rgba(232,220,200,.7);
  will-change: transform, opacity;
}
.hero.fx-on .fx-mote { animation: fxDrift var(--dur,14s) linear var(--delay,0s) infinite; }
@keyframes fxDrift {
  0%   { opacity: 0; transform: translate3d(0,0,0) scale(.6); }
  12%  { opacity: var(--peak,.7); }
  88%  { opacity: var(--peak,.7); }
  100% { opacity: 0; transform: translate3d(var(--dx,20px), var(--dy,-120px), 0) scale(1); }
}

/* --- content plane: sharp, slight counter-drift --- */
.hero__inner {
  transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 8px), 0);
  transition: transform .35s var(--ease);
}
.hero.fx-on .hero__inner { transition: none; }

/* --- iridescent sheen sweeping across the metallic wordmark ---
   The sheen is masked to the exact logo silhouette, so the shimmer
   travels through the letters themselves — never a rectangular panel. */
.hero__logo { position: relative; }
.hero__logowrap { position: relative; display: inline-block; isolation: isolate; }
.hero__logowrap::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--holo);
  background-size: 240% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  -webkit-mask: url("../assets/logo/DIRO_logo_metallic_dark.svg") center/contain no-repeat;
          mask: url("../assets/logo/DIRO_logo_metallic_dark.svg") center/contain no-repeat;
  z-index: 2;
}
.hero.fx-on .hero__logowrap::after {
  animation: fxSheen 8s var(--ease) infinite;
}
@keyframes fxSheen {
  0%,  38%, 100% { background-position: 165% 0; opacity: 0; }
  46%            { opacity: .85; }
  62%            { background-position: -65% 0; opacity: .7; }
  72%            { opacity: 0; }
}

/* ------------------------------------------------------------
   AMBIENT DEPTH on the dark sections — a quiet fixed backdrop so
   the whole page reads layered, not just the hero.
   ------------------------------------------------------------ */
.section--dark, .footer { position: relative; isolation: isolate; }
.section--dark > .wrap, .footer > * { position: relative; z-index: 1; }
.section--dark::before, .footer::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 90% at 82% 0%, rgba(156,107,71,.15), transparent 60%),
    radial-gradient(52% 82% at 6% 100%, rgba(143,169,166,.10), transparent 62%);
  /* faint stacked-panel edge: a thin iridescent hairline at the top */
  box-shadow: inset 0 1px 0 rgba(200,154,115,.14);
  -webkit-mask-image: linear-gradient(#000, #000);
          mask-image: linear-gradient(#000, #000);
}
/* faint grid ghost on the presence band for extra depth */
#facts::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(201,201,203,.05) 1px, transparent 1px);
  background-size: 96px 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  opacity: .7;
}

/* ------------------------------------------------------------
   PORTFOLIO CARDS — 3D tilt + holographic surface sweep
   ------------------------------------------------------------ */
.cards { perspective: 1100px; }
.card {
  --tx: 0; --ty: 0;          /* pointer within card, -0.5..0.5 */
  transform-style: preserve-3d;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card.fx-tilt {
  transform:
    perspective(1100px)
    rotateX(calc(var(--ty) * -6deg))
    rotateY(calc(var(--tx) * 7deg))
    translateY(-6px);
  transition: box-shadow .3s var(--ease);
  box-shadow:
    0 26px 50px -24px rgba(0,0,0,.65),
    0 0 0 1px rgba(200,154,115,.20);
}
/* holographic sheen that follows the cursor across the card face */
.card::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(130px 130px at var(--gx,50%) var(--gy,0%),
      rgba(232,220,200,.28), transparent 60%),
    linear-gradient(115deg,
      transparent 40%,
      rgba(200,154,115,.14) 48%,
      rgba(143,169,166,.14) 56%,
      transparent 64%);
  mix-blend-mode: screen;
  transition: opacity .3s var(--ease);
}
.card.fx-tilt::after { opacity: 1; }
/* the copper top-rule lifts toward the viewer */
.card__rule { transform: translateZ(30px); }
.card__name, .card__tag { transform: translateZ(18px); }

/* ------------------------------------------------------------
   REGION MAP + SKYLINE — gentle 3D lift on pointer
   ------------------------------------------------------------ */
.region__map, .skyband { perspective: 1000px; }
.region__map img, .region__map svg { transition: transform .4s var(--ease); }

/* ------------------------------------------------------------
   REDUCED MOTION — keep the depth, drop all movement
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero.fx-on .fx-stage,
  .hero.fx-on .hero__inner { transform: none !important; }
  .fx-glow, .fx-glow--cool,
  .hero.fx-on .fx-stage .hero__o,
  .hero.fx-on .hero__logowrap::after,
  .hero.fx-on .fx-mote { animation: none !important; }
  .hero.fx-on .hero__logowrap::after { opacity: .28; }
  .card.fx-tilt { transform: translateY(-6px) !important; }
}

/* ------------------------------------------------------------
   SMALL SCREENS — lighten the stage (no pointer tilt anyway)
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .fx-grid { opacity: .4; }
  .fx-glow { opacity: .7; }
  .fx-motes { display: none; }
}