/* ═══════════════════════════════════════════════════
   SEC 3 — INNOVATION LAB
   Holographic Depth / Parallax Cards
   All content visible at all times.
   JS drives rotateX/Y tilt on hover;
   inner layers use translateZ for depth pop.
═══════════════════════════════════════════════════ */

#s3 {
  background: radial-gradient(ellipse at 32% 55%, rgba(0,180,90,.04) 0%, transparent 60%), var(--obs);
}

/* ── Grid — fluid columns, min 280px ── */
.holo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;   /* keep grid centred inside flex .sec */
}

/* ── Perspective wrapper ── */
.holo-wrap { perspective: 900px; position: relative; }

/* ── Card shell ── */
.holo-card {
  position: relative;
  width: 100%;
  min-height: 270px;
  padding: 26px 24px 22px;
  background: linear-gradient(145deg, rgba(6,12,34,.97), rgba(3,6,22,.99));
  border: 1px solid rgba(var(--acc-rgb), .22);
  transform-style: preserve-3d;
  transition: transform .12s ease, box-shadow .22s ease, border-color .22s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: transform;
  box-shadow: 0 4px 28px rgba(var(--acc-rgb), .07), inset 0 0 28px rgba(var(--acc-rgb), .03);
}
.holo-wrap:hover .holo-card {
  box-shadow: 0 10px 52px rgba(var(--acc-rgb), .24), 0 0 90px rgba(var(--acc-rgb), .09), inset 0 0 44px rgba(var(--acc-rgb), .05);
  border-color: rgba(var(--acc-rgb), .48);
}

/* ── Corner accent ── */
.hc-corner {
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid; border-width: 0 34px 34px 0;
  border-color: transparent rgba(var(--acc-rgb), .25) transparent transparent;
  transition: border-color .22s;
}
.holo-wrap:hover .hc-corner { border-right-color: rgba(var(--acc-rgb), .6); }

/* ── Shimmer sweep ── */
.hc-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(108deg, transparent 28%, rgba(var(--acc-rgb), .06) 50%, transparent 72%);
  opacity: 0; transform: translateX(-120%);
  pointer-events: none; z-index: 0;
}
.holo-wrap:hover .hc-shimmer { opacity: 1; animation: hc-sweep 1.8s ease-in-out infinite; }
@keyframes hc-sweep { 0%{transform:translateX(-130%)} 100%{transform:translateX(130%)} }

/* ── Scanlines ── */
.hc-scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(var(--acc-rgb),.014) 3px,rgba(var(--acc-rgb),.014) 4px);
  pointer-events: none; z-index: 0;
}

/* ── Bottom pulse ── */
.hc-pulse {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--acc-rgb),1), transparent);
  animation: hc-pwave 3.4s ease-in-out infinite; opacity: .5;
}
@keyframes hc-pwave { 0%,100%{opacity:.22;transform:scaleX(.4)} 50%{opacity:.75;transform:scaleX(1)} }

/* ══ DEPTH LAYERS ══ */

.hc-num {
  font-family: var(--fd);
  font-size: 9px;
  letter-spacing: .35em;
  color: rgba(var(--acc-rgb), .75);   /* Raised from .5 — clearly legible */
  text-transform: uppercase;
  margin-bottom: 14px;
  transform: translateZ(6px);
  position: relative; z-index: 1;
}

.hc-ico {
  font-size: 36px; line-height: 1; margin-bottom: 12px;
  display: block; transform: translateZ(44px); position: relative; z-index: 2;
  filter: drop-shadow(0 0 14px rgba(var(--acc-rgb),.5));
  transition: filter .22s;
}
.holo-wrap:hover .hc-ico { filter: drop-shadow(0 0 26px rgba(var(--acc-rgb),.82)); }

.hc-name {
  font-family: var(--fd);
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 700;
  color: #ffffff;                        /* Pure white — maximum contrast */
  letter-spacing: .1em; line-height: 1.35; margin-bottom: 12px;
  transform: translateZ(26px); position: relative; z-index: 2;
  text-shadow: 0 0 20px rgba(var(--acc-rgb),.35);
  transition: text-shadow .22s;
}
.holo-wrap:hover .hc-name { text-shadow: 0 0 32px rgba(var(--acc-rgb),.6); }

.hc-desc {
  font-size: clamp(10.5px, 1.05vw, 11.5px); /* Was 9.5px — a full size jump */
  color: rgba(215, 232, 255, .84);            /* Was var(--dim) at .42 — 2× brighter */
  line-height: 1.8;
  flex: 1; letter-spacing: .025em; margin-bottom: 18px;
  transform: translateZ(12px); position: relative; z-index: 1;
}

/* ── Tech tags ── */
.hc-stack {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;
  transform: translateZ(20px); position: relative; z-index: 2;
}
.hc-tag {
  font-size: 8.5px;                  /* Was 7px — comfortably readable */
  padding: 4px 10px;
  background: rgba(var(--acc-rgb), .09);
  border: 1px solid rgba(var(--acc-rgb), .3);
  color: rgba(var(--acc-rgb), 1);    /* Full opacity accent color */
  letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
  transition: background .2s, box-shadow .2s;
}
.holo-wrap:hover .hc-tag {
  background: rgba(var(--acc-rgb), .16);
  box-shadow: 0 0 10px rgba(var(--acc-rgb), .22);
}

/* ── Footer link ── */
.hc-footer {
  transform: translateZ(18px); position: relative; z-index: 2; margin-top: auto;
}
.hc-link {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: rgba(var(--acc-rgb), .8); /* Was .65 */
  transition: color .2s, text-shadow .2s;
  display: inline-flex; align-items: center; gap: 4px;
}
.hc-link span { pointer-events: none; }
.holo-wrap:hover .hc-link {
  color: rgba(var(--acc-rgb), 1);
  text-shadow: 0 0 16px rgba(var(--acc-rgb), .7);
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */

/* Tablet: force 2 columns */
@media (max-width: 960px) {
  .holo-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .holo-card { min-height: 250px; }
  .hc-desc { font-size: 10.5px; }
}

/* Large mobile: 2 columns, compact */
@media (max-width: 640px) {
  .holo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .holo-card { min-height: 0; padding: 16px 14px 14px; }
  /* Disable depth transforms at this size — no room to show perspective */
  .hc-ico    { font-size: 26px; margin-bottom: 8px; transform: none; }
  .hc-name   { font-size: 10.5px; transform: none; margin-bottom: 8px; }
  .hc-desc   { font-size: 9.5px; line-height: 1.65; transform: none; margin-bottom: 12px; }
  .hc-num    { font-size: 7.5px; margin-bottom: 8px; transform: none; letter-spacing: .2em; }
  .hc-stack  { gap: 4px; margin-bottom: 12px; transform: none; }
  .hc-tag    { font-size: 7px; padding: 3px 7px; }
  .hc-footer { transform: none; }
  .hc-link   { font-size: 7.5px; }
}

/* Mid-size phones: still 2 cols but cards taller to avoid overflow */
@media (max-width: 480px) {
  .holo-grid { gap: 10px; }
  .holo-card { padding: 14px 12px 12px; }
  .hc-ico    { font-size: 22px; }
  .hc-name   { font-size: 10px; }
  .hc-desc   { font-size: 9px; line-height: 1.6; }
  .hc-tag    { font-size: 6.5px; padding: 2px 6px; }
}

/* Small phones: single column */
@media (max-width: 380px) {
  .holo-grid { grid-template-columns: 1fr; }
  .holo-card { padding: 18px 16px 16px; }
  .hc-name  { font-size: 12px; }
  .hc-desc  { font-size: 10.5px; }
}


/* ══════════════════════════════════════════════════════
   MOBILE — SECTION 3 MATCHES SECTION 4 BEAM ANIMATION
   On touch devices: disable JS tilt, apply the same
   rotating conic-gradient beam border used by s4 bento cards.
   --hc-angle animates per card using its own --acc-rgb color.
══════════════════════════════════════════════════════ */

@property --hc-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes hc-beam-spin { to { --hc-angle: 360deg; } }

@media (hover: none) {
  /* Kill JS perspective tilt — can't drive it without a mouse */
  .holo-card {
    transform: none !important;
    will-change: auto;
    border: none !important; /* beam provides the border */
  }
  .hc-ico,.hc-name,.hc-desc,.hc-num,.hc-stack,.hc-footer { transform: none !important; }

  /* ── holo-wrap becomes the beam frame (like .bn-frame in s4) ──
     1.5px padding = border thickness; conic-gradient = spinning beam;
     each card's --acc-rgb gives it its own colour-matched beam        */
  .holo-wrap {
    --hc-angle: 0deg;
    --hc-speed: 4s;
    padding: 1.5px;
    perspective: none; /* reset so it doesn't distort flat beam */
    background: conic-gradient(
      from var(--hc-angle),
      rgba(var(--acc-rgb), .05)   0%,
      rgba(var(--acc-rgb), .05)  60%,
      rgba(var(--acc-rgb), .50)  72%,
      rgba(var(--acc-rgb), .92)  78%,
      rgba(255,255,255, .88)     80%,
      rgba(var(--acc-rgb), .92)  82%,
      rgba(var(--acc-rgb), .50)  88%,
      rgba(var(--acc-rgb), .05) 100%
    );
    animation: hc-beam-spin var(--hc-speed) linear infinite;
    box-shadow:
      0 0 20px rgba(var(--acc-rgb), .08),
      0 6px 32px rgba(0,0,0,.55);
  }

  /* ── Tap: beam speed-up + full glow burst = s4 :active behaviour ── */
  .holo-wrap:active { --hc-speed: 1s; }
  .holo-wrap:active {
    box-shadow:
      0 0 44px rgba(var(--acc-rgb), .28),
      0 0 88px rgba(var(--acc-rgb), .1),
      0 14px 56px rgba(0,0,0,.75);
  }
  .holo-wrap:active .holo-card {
    box-shadow: inset 0 0 44px rgba(var(--acc-rgb), .08) !important;
  }
  .holo-wrap:active .hc-shimmer {
    opacity: 1 !important;
    animation: hc-sweep .8s ease-out forwards !important;
  }
  .holo-wrap:active .hc-ico {
    filter: drop-shadow(0 0 22px rgba(var(--acc-rgb), .9)) !important;
  }
  .holo-wrap:active .hc-name {
    text-shadow: 0 0 28px rgba(var(--acc-rgb), .6) !important;
  }
  .holo-wrap:active .hc-corner {
    border-right-color: rgba(var(--acc-rgb), .65) !important;
  }
  .holo-wrap:active .hc-link {
    color: rgba(var(--acc-rgb), 1) !important;
    text-shadow: 0 0 14px rgba(var(--acc-rgb), .7) !important;
  }
  .holo-wrap:active .hc-tag {
    background: rgba(var(--acc-rgb), .18) !important;
    box-shadow: 0 0 10px rgba(var(--acc-rgb), .25) !important;
  }

  /* ── Fallback if conic-gradient @property not supported ── */
  @supports not (background: conic-gradient(from 1deg, red, blue)) {
    .holo-wrap {
      padding: 0;
      background: none;
      animation: none;
      border: 1px solid rgba(var(--acc-rgb), .28);
    }
    .holo-card { border: 1px solid rgba(var(--acc-rgb), .28) !important; }
    .holo-wrap:active {
      border-color: rgba(var(--acc-rgb), .65);
      box-shadow: 0 0 28px rgba(var(--acc-rgb), .2);
    }
  }
}