/* ============================================================================
   brand-3d.css - 3-D website mode (TREE_D_WEBSITE=ON)
   ----------------------------------------------------------------------------
   Loaded after brand.css only when the switch is ON (include/header.inc.php),
   and every rule is scoped under body.iog-3d - with the switch OFF none of
   this is even downloaded, so the normal site is untouched.

   Pure CSS depth: layered shadows, glass cards, perspective, and a slight
   tilt towards the pointer/finger (angles set by assets/js/iog-3d.js via
   --iog-rx / --iog-ry). No libraries.
   ============================================================================ */

.iog-3d {
  --iog-3d-shadow:
    0 1px 1px rgba(1, 32, 96, .04),
    0 4px 8px rgba(1, 32, 96, .05),
    0 12px 24px rgba(1, 32, 96, .07),
    0 28px 48px -12px rgba(1, 32, 96, .14);
  --iog-3d-shadow-hover:
    0 2px 2px rgba(1, 32, 96, .04),
    0 8px 16px rgba(1, 32, 96, .07),
    0 20px 36px rgba(1, 32, 96, .1),
    0 40px 64px -16px rgba(1, 32, 96, .2);
  --iog-3d-glass: rgba(255, 255, 255, .72);
  --iog-3d-glass-border: rgba(255, 255, 255, .75);
  --iog-3d-highlight: inset 0 1px 0 rgba(255, 255, 255, .85);
}

/* Soft colour fields behind content, so the glass has something to frost. */
.iog-3d .iog-section,
.iog-3d .iog-section--tinted {
  background-image:
    radial-gradient(40rem 22rem at 8% 0%, rgba(30, 102, 255, .07), transparent 70%),
    radial-gradient(36rem 20rem at 95% 100%, rgba(255, 190, 0, .08), transparent 70%);
}

/* ------------------------------------------------------------------------
   Glass cards + layered shadows
   ------------------------------------------------------------------------ */
.iog-3d .iog-pcard,
.iog-3d .iog-step,
.iog-3d .iog-card,
.iog-3d .iog-cmp-card,
.iog-3d .iog-giq,
.iog-3d .value-strip {
  background: var(--iog-3d-glass);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--iog-3d-glass-border);
  box-shadow: var(--iog-3d-highlight), var(--iog-3d-shadow);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .iog-3d .iog-pcard,
  .iog-3d .iog-step,
  .iog-3d .iog-card,
  .iog-3d .iog-cmp-card,
  .iog-3d .iog-giq,
  .iog-3d .value-strip { background: #fff; }
}

/* Blur is the costly part on low-end phones - keep it light there. */
@media (max-width: 767.98px) {
  .iog-3d .iog-pcard,
  .iog-3d .iog-step,
  .iog-3d .iog-card,
  .iog-3d .iog-cmp-card,
  .iog-3d .iog-giq,
  .iog-3d .value-strip {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* ------------------------------------------------------------------------
   Perspective tilt (angles from iog-3d.js)
   ------------------------------------------------------------------------ */
.iog-3d .iog-pcard,
.iog-3d .iog-step,
.iog-3d .iog-card,
.iog-3d .iog-cmp-card,
.iog-3d .value-strip .pillar,
.iog-3d [data-iog-tilt] {
  --iog-rx: 0deg;
  --iog-ry: 0deg;
  --iog-lift: 0px;
  transform: perspective(900px) rotateX(var(--iog-rx)) rotateY(var(--iog-ry)) translateY(var(--iog-lift));
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
  will-change: transform;
}

/* Follow the pointer closely while tilting, glide back when released. */
.iog-3d .is-tilting { transition: transform .12s linear, box-shadow .3s ease; }

/* brand.css lifts these with transform on hover - fold that into the tilt. */
.iog-3d .iog-pcard:hover,
.iog-3d .iog-cmp-card:hover { --iog-lift: -6px; transform: perspective(900px) rotateX(var(--iog-rx)) rotateY(var(--iog-ry)) translateY(var(--iog-lift)); box-shadow: var(--iog-3d-highlight), var(--iog-3d-shadow-hover); }
.iog-3d .iog-step:hover,
.iog-3d .iog-card:hover { --iog-lift: -4px; transform: perspective(900px) rotateX(var(--iog-rx)) rotateY(var(--iog-ry)) translateY(var(--iog-lift)); box-shadow: var(--iog-3d-highlight), var(--iog-3d-shadow-hover); }

/* Touch: a slight press-in. */
.iog-3d .is-pressed { --iog-lift: 1px; }

/* Depth inside the card: icons float forward of the surface. */
.iog-3d .iog-pcard-icon,
.iog-3d .iog-step-icon,
.iog-3d .value-strip .pill-icon { transform: translateZ(28px); }
.iog-3d .iog-pcard h3,
.iog-3d .iog-step h5 { transform: translateZ(14px); }

/* ------------------------------------------------------------------------
   Pre-rendered 3-D icons (iog_3d_img())
   ------------------------------------------------------------------------ */
.iog-3d-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(1, 32, 96, .18));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.iog-3d .iog-pcard-icon {
  width: 76px; height: 76px;
  margin-left: -6px;
  background: transparent;
  border-radius: 0;
}
.iog-3d .iog-pcard:hover .iog-pcard-icon { transform: translateZ(40px) scale(1.06) rotate(-4deg); }

.iog-3d .iog-step-icon {
  width: 72px; height: 72px;
  margin: .4rem 0 .9rem;
}

.iog-3d .value-strip .pill-icon {
  width: 64px; height: 64px;
  background: transparent;
}

/* ------------------------------------------------------------------------
   3-D hero stage - still poster, cross-fades to the live canvas
   ------------------------------------------------------------------------ */
.iog-3d-hero {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 3;
  margin: 1.75rem 0 0;
}
.iog-3d-hero::after { /* soft floor shadow */
  content: '';
  position: absolute;
  left: 22%; right: 22%; bottom: 2%;
  height: 9%;
  background: radial-gradient(closest-side, rgba(1, 32, 96, .22), transparent);
  filter: blur(6px);
  z-index: 0;
}
.iog-3d-hero-poster,
.iog-3d-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}
.iog-3d-hero-poster { object-fit: contain; transition: opacity .6s ease; }
.iog-3d-hero-canvas { opacity: 0; transition: opacity .6s ease; }
.iog-3d-hero.is-live .iog-3d-hero-canvas { opacity: 1; }
.iog-3d-hero.is-live .iog-3d-hero-poster { opacity: 0; }

@media (max-width: 991.98px) {
  .iog-3d-hero { max-width: 340px; margin: 1.25rem auto 0; }
}
@media (max-width: 575.98px) {
  .iog-3d-hero { max-width: 280px; }
}

/* ------------------------------------------------------------------------
   Wura phone mock + buttons
   ------------------------------------------------------------------------ */
.iog-3d .iog-phone {
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .06),
    0 30px 60px -20px rgba(0, 0, 0, .55),
    0 18px 36px -18px rgba(1, 32, 96, .6);
}

.iog-3d .btn-iog,
.iog-3d .btn-iog-gold,
.iog-3d .btn-iog-primary,
.iog-3d .btn-nav-cta {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px rgba(1, 32, 96, .45);
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.iog-3d .btn-iog:active,
.iog-3d .btn-iog-gold:active,
.iog-3d .btn-iog-primary:active,
.iog-3d .btn-nav-cta:active {
  transform: translateY(1px) scale(.99);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 6px -3px rgba(1, 32, 96, .45);
}

/* ------------------------------------------------------------------------
   Reduced motion: keep the depth styling, drop all movement
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .iog-3d .iog-pcard,
  .iog-3d .iog-step,
  .iog-3d .iog-card,
  .iog-3d .iog-cmp-card,
  .iog-3d .value-strip .pillar,
  .iog-3d [data-iog-tilt],
  .iog-3d .iog-pcard:hover,
  .iog-3d .iog-cmp-card:hover,
  .iog-3d .iog-step:hover,
  .iog-3d .iog-card:hover {
    transform: none;
    transition: box-shadow .2s ease;
  }
  .iog-3d .iog-pcard:hover .iog-pcard-icon { transform: none; }
  .iog-3d-hero-poster,
  .iog-3d-hero-canvas { transition: none; }
}