/* ═══════════════════════════════════════════════════
   TARI ELECTRA — GEOMETRIC AESTHETIC LAYER
   Loads after Tailwind. All classes are additive.
   One variable (--diag) controls every diagonal.
═══════════════════════════════════════════════════ */

:root {
  --diag: 56px;
  --geo-green:   var(--enterprise-primary,   #0B5F2A);
  --geo-dark:    var(--enterprise-secondary, #0E141B);
  --geo-lime:    var(--enterprise-accent,    #4DFF88);
}

/* ─── Diagonal section cuts ──────────────────────── */
.diag-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diag)), 0 100%);
  /* Caller must have overflow:hidden on this element or parent */
}
.diag-top {
  clip-path: polygon(0 var(--diag), 100% 0, 100% 100%, 0 100%);
}
.diag-strip {
  clip-path: polygon(0 var(--diag), 100% 0, 100% calc(100% - var(--diag)), 0 100%);
}

/* ─── Asymmetric row container ───────────────────── */
.asym-row {
  display: flex;
  align-items: stretch;
  min-height: 520px;
}
.asym-row.flip {
  flex-direction: row-reverse;
}

/* ─── Column widths ──────────────────────────────── */
.asym-row .col-65 {
  flex: 0 0 65%;
  position: relative;
}
.asym-row .col-35 {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.asym-row .col-58 {
  flex: 0 0 58%;
  position: relative;
}
.asym-row .col-42 {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* ─── Text column padding (replaces page-shell in asym-rows) ── */
.col-text-pad {
  padding: 4rem 2rem 4rem 1.5rem;
}
@media (min-width: 640px) {
  .col-text-pad { padding: 4.5rem 2.5rem 4.5rem 2.5rem; }
}
@media (min-width: 768px) {
  .col-text-pad { padding: 5rem 3rem 5rem 3rem; }
}
@media (min-width: 1024px) {
  .col-text-pad { padding: 5.5rem 3rem 5.5rem 3.5rem; }
}
@media (min-width: 1280px) {
  .col-text-pad { padding: 6rem 3rem 6rem 4rem; }
}

/* ─── Photo side columns ─────────────────────────── */
.photo-side {
  position: relative;
  overflow: hidden;
}
.photo-side img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Gradient overlay — fades photo toward adjacent text */
.photo-side::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.photo-side.fade-r::after {
  background: linear-gradient(to right, transparent 55%, var(--geo-dark) 100%);
}
.photo-side.fade-l::after {
  background: linear-gradient(to left, transparent 55%, var(--geo-dark) 100%);
}
/* Override: white-bg pages fade to white */
.photo-side.fade-r-white::after {
  background: linear-gradient(to right, transparent 55%, #ffffff 100%);
}
.photo-side.fade-l-white::after {
  background: linear-gradient(to left, transparent 55%, #ffffff 100%);
}

/* ─── Lime accent edge (3px rule at photo/text boundary) ── */
.lime-edge-r { box-shadow: inset -3px 0 0 var(--geo-lime); }
.lime-edge-l { box-shadow: inset  3px 0 0 var(--geo-lime); }

/* ─── Mobile: stack columns, remove diagonals ────── */
@media (max-width: 767px) {
  .asym-row,
  .asym-row.flip           { flex-direction: column; }

  .asym-row .col-65,
  .asym-row .col-35,
  .asym-row .col-58,
  .asym-row .col-42        { flex: none; width: 100%; }

  .photo-side              { height: 260px; min-height: 200px; }

  /* Remove diagonals — clip-path causes horizontal overflow on mobile */
  .diag-bottom,
  .diag-top,
  .diag-strip              { clip-path: none; }

  .col-text-pad            { padding: 3rem 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   3D CARDS — A3 Glow & Reflect
   ═══════════════════════════════════════════════════════════════ */

.card-3d-wrap {
  position: relative;
  display: block;
  /* perspective handled by perspective() in each transform below */
}

.card-3d {
  position: relative;
  z-index: 1; /* sits above .card-3d-ambient (z-index:0) */
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  transform: perspective(800px) rotateY(-16deg) rotateX(8deg);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow:
    -18px 22px 48px rgba(0,0,0,0.75),
    0 0 28px rgba(77,255,136,0.16),
    0 0 0 1px rgba(77,255,136,0.35);
}

.card-3d:hover {
  transform: perspective(800px) rotateY(-6deg) rotateX(3deg);
  box-shadow:
    -8px 12px 32px rgba(0,0,0,0.55),
    0 0 40px rgba(77,255,136,0.28),
    0 0 0 1px rgba(77,255,136,0.5);
}

/* Glowing lime top edge */
.card-3d::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--geo-lime);
  box-shadow: 0 0 12px var(--geo-lime), 0 0 24px rgba(77,255,136,0.5);
  z-index: 10;
  pointer-events: none;
}

/* Glowing lime left edge */
.card-3d::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--geo-lime), rgba(77,255,136,0));
  box-shadow: 0 0 10px rgba(77,255,136,0.6);
  z-index: 10;
  pointer-events: none;
}

/* Reflection strip beneath card.
   KEEP IN SYNC: rotateY/rotateX values must match .card-3d transform above. */
.card-3d-reflect {
  height: 32px;
  transform: perspective(800px) rotateY(-16deg) rotateX(8deg) scaleY(-0.25);
  background: linear-gradient(to bottom, rgba(77,255,136,0.1), transparent);
  border-radius: 0 0 10px 10px;
  filter: blur(3px);
  opacity: 0.5;
  pointer-events: none;
  transition: transform 0.35s ease;
}

/* Ambient radial glow behind card */
.card-3d-ambient {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at 50% 60%, rgba(77,255,136,0.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Theme variants */
.card-3d.theme-dark  { background: #0E141B; color: #fff; }
.card-3d.theme-light { background: #f5f0e8; color: #0E141B; }
.card-3d.theme-green { background: #0B5F2A; color: #fff; }

/* Photo strip */
.card-3d .card-photo {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}
.card-3d .card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-3d .card-photo-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(14,20,27,0.92), transparent);
}

/* Inner body */
.card-3d .card-body-inner {
  padding: 1rem 1.1rem 1.2rem;
  position: relative;
  z-index: 2;
}

/* Location corner badge */
.card-3d .card-location {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(77,255,136,0.15);
  border: 1px solid rgba(77,255,136,0.4);
  border-radius: 2px;
  padding: 2px 8px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--geo-lime);
  z-index: 5;
  pointer-events: none;
}

/* Stat highlight number */
.card-3d .card-stat {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--geo-lime);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Tag pills */
.card-3d .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 0.5rem;
}
.card-3d .card-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid rgba(77,255,136,0.3);
  border-radius: 2px;
  color: rgba(77,255,136,0.8);
}

/* Zone grid wrappers */
.cards-zone-3       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.cards-zone-2       { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
.cards-zone-1       { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 380px; }
.cards-zone-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }

/* Mobile — remove 3D tilt, keep glow */
@media (max-width: 767px) {
  .card-3d              { transform: none; box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(77,255,136,0.25); }
  .card-3d:hover        { transform: none; }
  .card-3d-reflect      { display: none; }
  .card-3d-ambient      { display: none; }
  .card-3d .card-photo  { height: 160px; }
  .cards-zone-3,
  .cards-zone-2         { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   CASCADE SECTION LAYOUT
   Two-column grid: text left, sticky card rail right.
   Cards rendered by render_site_cards($page,$zone,$limit,'cascade')
═══════════════════════════════════════════════════════════ */

.cascade-section {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 3rem;
  align-items: start;
  position: relative;
}

.cascade-text {
  min-width: 0; /* prevent grid blowout */
}

/* Rail — sticky so cards stay visible as text scrolls */
.cascade-rail {
  position: sticky;
  top: 100px; /* clears navbar (~72px) + breathing room */
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 1.5rem;
  padding-bottom: 2rem;
}

/* Glowing green seam between text and rail */
.cascade-rail::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    #0B5F2A 25%,
    #4DFF88 50%,
    #0B5F2A 75%,
    transparent
  );
  animation: seamGlow 3s ease-in-out infinite alternate;
}

@keyframes seamGlow {
  from { opacity: 0.4; box-shadow: 0 0 4px rgba(77,255,136,0.2); }
  to   { opacity: 1;   box-shadow: 0 0 14px rgba(77,255,136,0.55); }
}

/* ─── CASCADE SLOTS ───────────────────────────────────────
   Each .cascade-slot wraps one card.
   `translate` (individual CSS property) handles the float bob.
   `scale` + `opacity` give the depth-recession effect.
   The inner .card-3d handles 3D tilt via --rx / --ry CSS vars.
─────────────────────────────────────────────────────────── */
.cascade-slot {
  position: relative;
  will-change: transform;
  margin-bottom: -24px; /* cards overlap for stacked-depth look */
  animation: cascadeFloat var(--float-dur, 3.2s) ease-in-out var(--float-delay, 0s) infinite;
  translate: var(--slot-x, 0px) 0;
  scale: var(--slot-scale, 1);
  opacity: var(--slot-opacity, 1);
}

/* Slot 0 — leading card: full size, no x-offset */
.cascade-slot[data-slot-index="0"] {
  --slot-x: 0px;
  --slot-scale: 1;
  --slot-opacity: 1;
  --float-dur: 3.2s;
  z-index: 3;
}

/* Slot 1 — mid card: slightly right, smaller */
.cascade-slot[data-slot-index="1"] {
  --slot-x: 18px;
  --slot-scale: 0.88;
  --slot-opacity: 0.82;
  --float-dur: 3.6s;
  z-index: 2;
}

/* Slot 2 — rear card: most right, smallest, dimmest */
.cascade-slot[data-slot-index="2"] {
  --slot-x: 32px;
  --slot-scale: 0.76;
  --slot-opacity: 0.62;
  --float-dur: 4s;
  z-index: 1;
}

@keyframes cascadeFloat {
  0%, 100% { translate: var(--slot-x, 0px) 0px; }
  50%       { translate: var(--slot-x, 0px) -7px; }
}

/* ─── GYRO TILT ───────────────────────────────────────────
   JS sets --rx / --ry on .cascade-section from mousemove /
   DeviceOrientationEvent. Defaults give the initial static tilt.
─────────────────────────────────────────────────────────── */
.cascade-section .card-3d {
  transform: perspective(500px)
             rotateX(var(--rx, 8deg))
             rotateY(var(--ry, -14deg));
  transition: transform 0.08s linear;
}

.cascade-section .card-3d:hover {
  transform: perspective(500px) rotateX(3deg) rotateY(-5deg);
}

/* Leading card lime glow pulse */
.cascade-slot[data-slot-index="0"] .card-3d {
  animation: leadingGlow 3.2s ease-in-out infinite;
}

@keyframes leadingGlow {
  0%, 100% { box-shadow: 6px 8px 24px rgba(0,0,0,0.5),  0 0 8px  rgba(77,255,136,0.12); }
  50%       { box-shadow: 6px 8px 28px rgba(0,0,0,0.65), 0 0 22px rgba(77,255,136,0.4); }
}

/* ─── MOBILE ──────────────────────────────────────────────
   Single column; rail becomes horizontal scroll strip.
   Gyro is skipped by JS on screens ≤ 768px.
─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cascade-section {
    grid-template-columns: 1fr;
  }

  .cascade-rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding-left: 0;
    gap: 1rem;
    padding-bottom: 0.75rem;
    scrollbar-width: none;
  }
  .cascade-rail::-webkit-scrollbar { display: none; }
  .cascade-rail::before { display: none; }

  .cascade-slot {
    flex-shrink: 0;
    width: 200px;
    margin-bottom: 0;
    translate: 0 0 !important;
    scale: 1 !important;
    opacity: 1 !important;
  }

  /* Float only on mobile — gyro is desktop/permission-gated */
  .cascade-section .card-3d {
    transform: perspective(400px) rotateX(5deg) rotateY(-10deg);
    transition: none;
  }
}