/* =========================================================
   af.css — Revised + cleaned
   Goals:
   - Keep intro + YT same width (shared container rule)
   - Fix logo clipping at top of viewport without changing
     spacing between logo and intro text
   - Keep mobile from getting a huge blank top area
   ========================================================= */


/* ===============================
   GLOBAL PAGE + PARALLAX BACKGROUND
   =============================== */

html, body{
  height:100%;
}

body{
  margin:0;
  min-height:100vh;
  font-family: Arial, Helvetica, sans-serif;
  color:#c9ffd6;
  background:#000; /* safe fallback */
}

/* Make sizing consistent everywhere */
*, *::before, *::after{
  box-sizing: border-box;
}


/* ===============================
   VARIABLES
   =============================== */

:root{
  --afContentMax: 1140px;

  /* Updated by JS to EXACT half of rendered banner height */
  --afBannerHalf: 70px;

  /* Requested default for desktop (used ONLY to push module down) */
  --afBannerPad: 120px;

  /* Outer page padding (WP-like cover) */
  --afPagePadTop: 5px;
}


/* ===============================
   SHARED CENTERED CONTENT WIDTH
   =============================== */

[data-af-intro-stack],
#yt-feed.af-yt-feed,.af-panel,
.af-after__inner{
  width: min(var(--afContentMax), 100%);
  margin-left: auto;
  margin-right: auto;
}


/* ===============================
   FIXED FULL-PAGE BACKGROUND (WP cover style)
   =============================== */

.af-pagebkg{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
}

.af-pagebkg__image{
  position:absolute;
  inset:-8vh -6vw; /* overscan to prevent edges when translated */
  background-image:url("img/pagebkg.jpg");
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
  transform: translate3d(0,0,0) scale(1.02);
  will-change: transform;
}

.af-pagebkg__overlay{
  position:absolute;
  inset:0;
  background:#000;
  opacity:0.80; /* dimRatio 80 */
  z-index:1;
}

/* WP cover padding (top 5px). Bottom spacing is handled by content sections. */
.af-page{
  padding-top: var(--afPagePadTop);
}


/* ===============================
   BELOW CONTENT SECTION (optional filler)
   =============================== */

.af-after{
  padding: 70px 16px 0;
}

.af-after__inner{
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(124,255,134,.20);
  background: linear-gradient(180deg, rgba(10,16,12,.65), rgba(3,6,5,.78));
  box-shadow: 0 18px 48px rgba(0,0,0,.58);
}


/* ===============================
   INTRO MODULE (RESTORED STYLING)
   Key change:
   - --afBannerPad pushes the whole module DOWN via margin-top
   - cp-content spacing uses ONLY --afBannerHalf (no BannerPad here)
   =============================== */

[data-af-intro-stack]{
  position:relative;
  overflow:visible;
  display:block;

  /* This prevents the VU banner from being clipped by the viewport top */
  margin-top: var(--afBannerPad);
}

[data-af-intro-stack],
[data-af-intro-stack] *{
  float:none !important;
}

/* VU banner overlay: exact half overlap (no BannerPad influence) */
[data-af-intro-stack] .af-vu{
  position:absolute;
  top:0;
  left:0;
  right:0;
  transform: translateY(calc(-1 * var(--afBannerHalf)));
  z-index:50;
  pointer-events:none;
}

[data-af-intro-stack] .af-vu [data-af-vu-stage]{
  position:relative;
  display:block;
  line-height:0;
}

[data-af-intro-stack] .af-vu img{
  width:100%;
  height:auto;
  display:block;
}

/* Intro panel */
#cp-intro{
  position:relative;
  overflow:visible;
  isolation:isolate;
  color:#c9ffd6;
}

#cp-intro .cp-clip{
  position:absolute;
  inset:0;
  border-radius:18px;
  overflow:hidden;
  z-index:0;

  background:
    radial-gradient(1200px 520px at 18% 0%, rgba(75,184,69,.16), rgba(0,0,0,0) 62%),
    radial-gradient(950px 420px at 82% 22%, rgba(0,255,140,.12), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(10,16,12,.95), rgba(3,6,5,.95));

  border:1px solid rgba(75,184,69,.58);
  box-shadow:
    0 18px 48px rgba(0,0,0,.58),
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 0 1px rgba(75,184,69,.20) inset,
    0 0 20px rgba(75,184,69,.20),
    0 0 56px rgba(0,255,140,.11);
}

/* ========= NOTES ONLY (no dotted/zigzag layer) ========= */
#cp-intro .cp-notes{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.72;
  mix-blend-mode:screen;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='280' viewBox='0 0 140 280'%3E%3Crect width='140' height='280' fill='none'/%3E%3Cg fill='%237CFF86' fill-opacity='0.42' font-family='Arial, Helvetica, sans-serif'%3E%3Ctext x='8' y='26' font-size='18'%3E%E2%99%AA%3C/text%3E%3Ctext x='22' y='64' font-size='16'%3E%E2%99%AB%3C/text%3E%3Ctext x='12' y='104' font-size='18'%3E%E2%99%AC%3C/text%3E%3Ctext x='26' y='144' font-size='16'%3E%E2%99%AA%3C/text%3E%3Ctext x='10' y='186' font-size='18'%3E%E2%99%AB%3C/text%3E%3Ctext x='24' y='232' font-size='16'%3E%E2%99%AC%3C/text%3E%3Ctext x='12' y='270' font-size='18'%3E%E2%99%AA%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 140px 280px;

  filter: drop-shadow(0 0 14px rgba(0,255,140,.18)) contrast(1.05);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.65) 62%, rgba(0,0,0,.10));
          mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.65) 62%, rgba(0,0,0,.10));

  animation: cpNotesFallMed 11.5s linear infinite;
  will-change: background-position, transform;
}

/* Second notes layer (slow) for mixed speeds + randomness */
#cp-intro .cp-notes:before{
  content:"";
  position:absolute;
  inset:-22%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.52;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='340' viewBox='0 0 180 340'%3E%3Crect width='180' height='340' fill='none'/%3E%3Cg fill='%237CFF86' fill-opacity='0.34' font-family='Arial, Helvetica, sans-serif'%3E%3Ctext x='10' y='34' font-size='22'%3E%E2%99%AB%3C/text%3E%3Ctext x='34' y='86' font-size='20'%3E%E2%99%AA%3C/text%3E%3Ctext x='12' y='142' font-size='22'%3E%E2%99%AC%3C/text%3E%3Ctext x='38' y='206' font-size='20'%3E%E2%99%AB%3C/text%3E%3Ctext x='10' y='270' font-size='22'%3E%E2%99%AA%3C/text%3E%3Ctext x='34' y='328' font-size='20'%3E%E2%99%AC%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 340px;

  filter: blur(.2px);
  animation: cpNotesFallSlow 19.0s linear infinite;
  will-change: background-position, transform, opacity;
}

@keyframes cpNotesFallMed{
  0%   { background-position: 0 -380px; transform: translateX(0px); }
  10%  { background-position: 8px -250px; transform: translateX(-2px); }
  20%  { background-position: -10px -110px; transform: translateX(3px); }
  35%  { background-position: 14px 60px; transform: translateX(-3px); }
  50%  { background-position: -6px 220px; transform: translateX(2px); }
  65%  { background-position: 18px 380px; transform: translateX(-4px); }
  80%  { background-position: -12px 520px; transform: translateX(3px); }
  100% { background-position: 0 680px; transform: translateX(0px); }
}

@keyframes cpNotesFallSlow{
  0%   { background-position: 0 -520px; transform: translateX(0px); }
  16%  { background-position: 12px -340px; transform: translateX(2px); }
  33%  { background-position: -8px -160px; transform: translateX(-2px); }
  52%  { background-position: 18px 80px; transform: translateX(3px); }
  70%  { background-position: -14px 320px; transform: translateX(-3px); }
  86%  { background-position: 10px 520px; transform: translateX(2px); }
  100% { background-position: 0 760px; transform: translateX(0px); }
}

/* Scanlines */
#cp-intro .cp-clip:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 10px,
    rgba(0,0,0,.22) 11px
  );
  opacity:.20;
  mix-blend-mode:overlay;
  z-index:0;
}

/* Downward glow sweep */
#cp-intro .cp-clip:after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(0,255,140,0) 0%,
    rgba(0,255,140,.18) 45%,
    rgba(0,255,140,.10) 55%,
    rgba(0,255,140,0) 100%
  );
  transform: skewY(-10deg);
  top:-60%;
  animation: cpSweep 5.8s linear infinite;
  opacity:.62;
  z-index:0;
}

@keyframes cpSweep{
  0%{ top:-80%; }
  100%{ top:140%; }
}

#cp-intro .cp-bevel{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.36;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 28%),
    linear-gradient(0deg, rgba(0,0,0,.38), rgba(0,0,0,0) 40%);
}

#cp-intro .cp-depth{
  position:absolute;
  inset:12px;
  border-radius:14px;
  pointer-events:none;
  z-index:1;
  border:1px solid rgba(124,255,134,.18);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 26px rgba(124,255,134,.10);
}

/* IMPORTANT: this controls logo-to-text spacing (do not include BannerPad) */
#cp-intro .cp-content{
  padding: calc(var(--afBannerHalf) + 18px) 18px 18px;
  position:relative;
  z-index:2;
  border-radius:18px;
}

#cp-intro .cp-layout{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:22px;
  align-items:start;
  overflow:visible;
}

@media (max-width:900px){
  #cp-intro .cp-layout{
    grid-template-columns:1fr;
    gap:14px;
  }
}

#cp-intro .cp-left{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}

#cp-intro .cp-photo{
  position:relative;
  z-index:2;
  width:150px;
  height:203px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(124,255,134,.28);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 0 22px rgba(124,255,134,.14);
}

#cp-intro .cp-photo img{
  width:150px;
  height:203px;
  object-fit:cover;
  display:block;
  filter:contrast(1.05) saturate(.95);
  opacity:.92;
}

#cp-intro .cp-table{
  width:100%;
  border-collapse:collapse;
  position:relative;
  z-index:1;
}

#cp-intro .cp-table th,
#cp-intro .cp-table td{
  padding:10px 0;
  vertical-align:top;
  border-top:1px solid rgba(75,184,69,.18);
}

#cp-intro .cp-table tr:first-child th,
#cp-intro .cp-table tr:first-child td{
  border-top:none;
}

#cp-intro .cp-table th{
  width:200px;
  font-size:12px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:rgba(201,255,214,.78);
  font-weight:700;
  padding-right:14px;
}

#cp-intro .cp-table td{
  color:rgba(201,255,214,.92);
  line-height:1.35;
  font-size:13px;
}

@media (max-width:900px){
  #cp-intro .cp-table th{ width:140px; }
}

#cp-intro .cp-accent{
  color:#7CFF86;
  font-weight:800;
  text-shadow:
    0 0 10px rgba(124,255,134,.22),
    0 0 26px rgba(0,255,140,.10);
}

#cp-intro .cp-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(124,255,134,.55);
  text-decoration:none !important;
  color:#c9ffd6 !important;
  background: linear-gradient(180deg, rgba(0,255,140,.14), rgba(0,0,0,.30));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 0 11px rgba(124,255,134,.12);
  font-size:11px;
  letter-spacing:.65px;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  user-select:none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  margin-right:8px;
  margin-bottom:6px;
}

#cp-intro .cp-bottom-dock{
  position:relative;
  z-index:6;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(75,184,69,.18);
  overflow:visible;
  display:flex;
  flex-direction:column;
  align-items:center;
}

#cp-intro .cp-extend-btn{
  width:min(520px,100%);
  transform: translateY(10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(124,255,134,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, rgba(0,255,140,.08), rgba(0,0,0,.24));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 22px rgba(124,255,134,.10);
  color:rgba(201,255,214,.92);
  cursor:pointer;
  user-select:none;
  text-transform:uppercase;
  letter-spacing:.9px;
  font-size:12px;
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(7px);
}

#cp-intro .cp-extend-right{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(201,255,214,.70);
  font-size:11px;
  letter-spacing:.8px;
}

#cp-intro .cp-chevron{
  width:10px;
  height:10px;
  border-right:2px solid rgba(124,255,134,.65);
  border-bottom:2px solid rgba(124,255,134,.65);
  transform:rotate(45deg);
  transition: transform .18s ease;
}

#cp-intro.is-open .cp-chevron{
  transform:rotate(225deg);
}

#cp-intro .cp-extended{
  display:none;
  margin-top:22px;
  width:100%;

  /* wrapper only — inner grid provides the connected frames */
  padding:0;
  border-radius:18px;
  border:0;
  background:transparent;
  box-shadow:none;

  position:relative;
  overflow:visible;
  z-index:999999;
}

#cp-intro.is-open .cp-extended{
  display:block;
}


/* ===============================
   EXTENDED INFO — TEXT + BRIDGE IMAGE (CONNECTED CYBER FRAME)
   =============================== */

#cp-intro .cp-extended__grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:0;
  align-items:stretch;
  width:100%;
}

/* =========================================================
   TOOLTIP FIX: ensure cp-tip popups can float above columns
   (prevents clipping + stacking-context traps)
   ========================================================= */

/* Make sure nothing in the extended panel clips the tooltip */
#cp-intro .cp-extended,
#cp-intro .cp-extended__grid,
#cp-intro .cp-extended__text,
#cp-intro .cp-extended__media{
  overflow: visible !important;
}

/* Ensure the text column paints above the image column */
#cp-intro .cp-extended__text{
  position: relative;
  z-index: 5;
}
#cp-intro .cp-extended__media{
  position: relative;
  z-index: 1;
}

/* =========================================================
   CONNECTED CYBERPUNK FRAMES (00:53 version)
   ========================================================= */

#cp-intro .cp-extended__text,
#cp-intro .cp-extended__media{
  position:relative;
  padding:16px;
  background:
    linear-gradient(180deg, rgba(10,16,12,.85), rgba(3,6,5,.92));
  border:1px solid rgba(124,255,134,.35);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.65) inset,
    0 0 24px rgba(124,255,134,.12);
}

/* Keep frame FX behind content */
#cp-intro .cp-extended__text > *,
#cp-intro .cp-extended__media > *{
  position:relative;
  z-index:2;
}

#cp-intro .cp-extended__text::before,
#cp-intro .cp-extended__media::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:10px;
  pointer-events:none;
  border:1px solid rgba(124,255,134,.22);
  box-shadow:
    0 0 12px rgba(124,255,134,.14),
    0 0 28px rgba(0,255,140,.08);
  z-index:1;
}

/* LEFT column: rounded left side only */
#cp-intro .cp-extended__text{
  border-right:none;
  border-radius:14px 0 0 14px;
}

/* RIGHT column: rounded right side only */
#cp-intro .cp-extended__media{
  border-left:none;
  border-radius:0 14px 14px 0;
  padding:10px;
  margin:0;
}

#cp-intro .cp-extended__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:10px;
  filter:
    contrast(1.05)
    saturate(0.95);
  opacity:0.92;
}

/* Mobile: stack and restore full rounding */
@media (max-width: 900px){
  #cp-intro .cp-extended__grid{ grid-template-columns:1fr; gap:14px; }
  #cp-intro .cp-extended__text,
  #cp-intro .cp-extended__media{
    border-radius:16px;
    border:1px solid rgba(124,255,134,.35);
  }
  #cp-intro .cp-extended__text{ border-right:1px solid rgba(124,255,134,.35); }
  #cp-intro .cp-extended__media{ border-left:1px solid rgba(124,255,134,.35); }
}

/* Ensure the tooltip itself is in a high stacking layer */
#cp-intro .cp-tip{
  position: relative;
  z-index: 9999;
}

/* Tooltip bubble: keep it above everything */
#cp-intro .cp-tip::after{
  z-index: 9999999;
}


#cp-intro .cp-note{
  margin-top:12px;
  color:rgba(201,255,214,.70);
  font-size:12px;
  letter-spacing:.35px;
}

/* Extended content typography */
#cp-intro .cp-h2{ margin: 0 0 10px 0; color:#67e756; }
#cp-intro .cp-p{ margin:0; color:#72e078; line-height:1.45; }
#cp-intro .cp-a{ color:#72e078; }

/* Tooltip (data-tooltip) */
#cp-intro .cp-tip{
  position:relative;
  display:inline-block;
  color:#00ff66;
  cursor:help;
  font-weight:700;
}

#cp-intro .cp-tip::after{
  content: attr(data-tooltip);
  display:none;
  position:absolute;
  bottom:125%;
  left:50%;
  transform:translateX(-50%);
  width:360px;
  max-width:min(360px, 80vw);
  background:#000000;
  color:#00ff66;
  border:1px solid #00ff66;
  padding:10px;
  font-size:14px;
  line-height:1.4;
  z-index:2147483647;
  text-align:left;
  box-shadow:0 0 18px rgba(0,255,102,.22);
  white-space:normal;
}

#cp-intro .cp-tip:hover::after,
#cp-intro .cp-tip:focus::after{
  display:block;
}

@media (prefers-reduced-motion: reduce){
  #cp-intro .cp-notes,
  #cp-intro .cp-notes:before,
  #cp-intro .cp-clip:after{
    animation:none !important;
  }
}


/* ===============================
   YOUTUBE FEED (server-proxy version)
   =============================== */

#yt-feed.af-yt-feed{
  margin-top:20px;
  margin-bottom:20px;

  font-family:Arial, Helvetica, sans-serif;
  color:#c9ffd6;

  position:relative;
  padding:18px 18px 14px;
  border-radius:18px;

  background:
    radial-gradient(1200px 520px at 18% 0%, rgba(75,184,69,.16), rgba(0,0,0,0) 62%),
    radial-gradient(950px 420px at 82% 22%, rgba(0,255,140,.12), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(10,16,12,.95), rgba(3,6,5,.95));

  border:1px solid rgba(75,184,69,.58);
  box-shadow:
    0 18px 48px rgba(0,0,0,.58),
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 0 1px rgba(75,184,69,.20) inset,
    0 0 20px rgba(75,184,69,.20),
    0 0 56px rgba(0,255,140,.11);
  overflow:hidden;
  isolation:isolate;
}

#yt-feed .yt-bevel{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 28%),
    linear-gradient(0deg, rgba(0,0,0,.38), rgba(0,0,0,0) 40%);
  opacity:.36;
  z-index:0;
}

#yt-feed .yt-depth{
  position:absolute;
  inset:12px;
  border-radius:14px;
  border:1px solid rgba(124,255,134,.18);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 26px rgba(124,255,134,.10);
  pointer-events:none;
  z-index:0;
}

#yt-feed:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 10px, rgba(0,0,0,.22) 11px);
  opacity:.32;
  mix-blend-mode:overlay;
  z-index:0;
}

#yt-feed:after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(0,255,140,0), rgba(0,255,140,.16), rgba(0,255,140,0));
  transform:skewX(-14deg);
  left:-60%;
  animation: ytSweep 6.4s linear infinite;
  opacity:.58;
  z-index:0;
}

@keyframes ytSweep{
  0%{ left:-70%; }
  100%{ left:140%; }
}

#yt-status.yt-status{
  position:relative;
  z-index:1;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:rgba(201,255,214,.92);
}

#yt-status .yt-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(124,255,134,.45);
  background: linear-gradient(180deg, rgba(0,255,140,.12), rgba(0,0,0,.28));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 0 16px rgba(124,255,134,.14);
  white-space:nowrap;
}

#yt-status .yt-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background: rgba(124,255,134,.95);
  box-shadow: 0 0 10px rgba(124,255,134,.35), 0 0 18px rgba(0,255,140,.18);
  animation: ytPing 1.6s ease-in-out infinite;
  flex:0 0 auto;
}

@keyframes ytPing{
  0%, 100% { transform: scale(1); opacity: .95; }
  50%      { transform: scale(1.45); opacity: .55; }
}

#yt-status .yt-sub{
  color:rgba(201,255,214,.72);
  letter-spacing:.5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#yt-items.yt-items{
  position:relative;
  z-index:1;
}

/* Cards */
#yt-items .yt-card{
  position:relative;
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 10px;
  cursor:pointer;
  border-bottom:1px solid rgba(75,184,69,.18);
  background: linear-gradient(90deg, rgba(0,255,140,.00), rgba(0,255,140,.040), rgba(0,255,140,.00));
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
  overflow:hidden;
}

#yt-items .yt-card .yt-card-bevel{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 28%),
    linear-gradient(0deg, rgba(0,0,0,.30), rgba(0,0,0,0) 40%);
  opacity:.28;
  mix-blend-mode:overlay;
}

#yt-items .yt-card:before,
#yt-items .yt-card:after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  border:2px solid rgba(124,255,134,.55);
  opacity:.55;
  filter: drop-shadow(0 0 8px rgba(124,255,134,.18));
  transition: opacity .18s ease;
  pointer-events:none;
}

#yt-items .yt-card:before{
  top:10px;
  left:10px;
  border-right:0;
  border-bottom:0;
}

#yt-items .yt-card:after{
  bottom:10px;
  right:10px;
  border-left:0;
  border-top:0;
}

#yt-items .yt-card .yt-trace{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(90deg, rgba(0,255,140,0), rgba(0,255,140,.22), rgba(0,255,140,0));
  transform: translateX(-120%);
  transition: opacity .18s ease;
  mix-blend-mode:screen;
}

#yt-items .yt-card:hover{
  transform: translateY(-2px) translateZ(0);
  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 0 0 1px rgba(124,255,134,.10) inset;
  background: linear-gradient(90deg, rgba(0,255,140,.00), rgba(0,255,140,.080), rgba(0,255,140,.00));
  filter: brightness(1.03);
}

#yt-items .yt-card:hover:before,
#yt-items .yt-card:hover:after{
  opacity:.9;
}

#yt-items .yt-card:hover .yt-trace{
  opacity:.85;
  animation: ytTrace 1.1s ease-out infinite;
}

@keyframes ytTrace{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

#yt-items .yt-card:hover .yt-card-bevel{
  opacity:.34;
}

/* Thumbnail */
#yt-items .yt-thumb{
  width:160px;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(124,255,134,.35);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 0 18px rgba(124,255,134,.14),
    0 0 34px rgba(0,255,140,.08);
}

/* Title + glitch */
#yt-items .yt-title{
  position:relative;
  font-weight:800;
  margin:0 0 6px;
  color:#7CFF86;
  letter-spacing:.35px;
  text-shadow: 0 0 10px rgba(124,255,134,.22), 0 0 26px rgba(0,255,140,.10);
  display:inline-block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#yt-items .yt-title[data-text]:before,
#yt-items .yt-title[data-text]:after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

#yt-items .yt-title[data-text]:before{
  transform: translateX(1px);
  text-shadow: -2px 0 rgba(0,255,140,.55);
  clip-path: inset(0 0 55% 0);
}

#yt-items .yt-title[data-text]:after{
  transform: translateX(-1px);
  text-shadow: 2px 0 rgba(180,255,220,.35);
  clip-path: inset(45% 0 0 0);
}

#yt-items .yt-card:hover .yt-title[data-text]:before,
#yt-items .yt-card:hover .yt-title[data-text]:after{
  opacity:.85;
  animation: ytGlitch 650ms steps(2,end) infinite;
}

@keyframes ytGlitch{
  0%{ transform: translateX(0px); }
  20%{ transform: translateX(-2px); }
  40%{ transform: translateX(2px); }
  60%{ transform: translateX(-1px); }
  80%{ transform: translateX(1px); }
  100%{ transform: translateX(0px); }
}

#yt-items .yt-date{
  font-size:12px;
  color:rgba(201,255,214,.75);
  margin-bottom:10px;
  letter-spacing:.35px;
  text-transform:uppercase;
}

#yt-items .yt-desc{
  font-size:13px;
  color:rgba(201,255,214,.80);
  line-height:1.35;
}

/* Like button */
#yt-items a.yt-like-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(124,255,134,.55);
  text-decoration:none !important;
  color:#c9ffd6 !important;
  background: linear-gradient(180deg, rgba(0,255,140,.14), rgba(0,0,0,.30));
  box-shadow: 0 0 0 1px rgba(0,0,0,.60) inset, 0 0 11px rgba(124,255,134,.12);
  font-size:8.5px;
  letter-spacing:.45px;
  text-transform:uppercase;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  user-select:none;
  position:relative;
  overflow:hidden;
}

#yt-items a.yt-like-btn:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,255,140,0), rgba(0,255,140,.22), rgba(0,255,140,0));
  transform: translateX(-120%);
  opacity:.65;
  pointer-events:none;
}

#yt-items a.yt-like-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.60) inset, 0 0 22px rgba(124,255,134,.24);
  filter: brightness(1.06);
}

#yt-items a.yt-like-btn:hover:before{
  animation: ytBtnSweep 900ms ease-out infinite;
}

@keyframes ytBtnSweep{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}

/* Footer CTA */
#yt-feed .yt-footer{
  position:relative;
  z-index:1;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(75,184,69,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

#yt-feed .yt-footer:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, rgba(0,255,140,0), rgba(0,255,140,.25), rgba(0,255,140,0));
  opacity:.7;
  pointer-events:none;
}

#yt-feed .yt-footer .yt-footer-label{
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:rgba(201,255,214,.70);
  white-space:nowrap;
}

#yt-feed .yt-footer .yt-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none !important;
  color:#eaffef !important;
  border:1px solid rgba(124,255,134,.55);
  background: linear-gradient(180deg, rgba(0,255,140,.20), rgba(0,0,0,.45));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 0 0 1px rgba(124,255,134,.12) inset,
    0 10px 0 rgba(0,0,0,.55),
    0 0 22px rgba(124,255,134,.16);
  position:relative;
  overflow:hidden;
  user-select:none;
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  max-width:100%;
}

#yt-feed .yt-footer .yt-btn:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,255,140,0), rgba(0,255,140,.20), rgba(0,255,140,0));
  transform: translateX(-120%);
  opacity:.65;
  pointer-events:none;
}

#yt-feed .yt-footer .yt-btn:hover{
  filter: brightness(1.06);
}

#yt-feed .yt-footer .yt-btn:hover:before{
  animation: ytBtnSweep2 900ms ease-out infinite;
}

@keyframes ytBtnSweep2{
  0%{ transform: translateX(-120%); }
  100%{ transform: translateX(120%); }
}

#yt-feed .yt-footer .yt-btn:active{
  transform: translateY(8px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 0 0 1px rgba(124,255,134,.12) inset,
    0 2px 0 rgba(0,0,0,.55),
    0 0 18px rgba(124,255,134,.14);
  filter: brightness(1.02);
}

#yt-feed .yt-footer .yt-icon{
  width:22px;
  height:16px;
  flex:0 0 auto;
  filter:
    drop-shadow(0 0 6px rgba(124,255,134,.35))
    drop-shadow(0 0 16px rgba(0,255,140,.18));
  opacity:.98;
}

#yt-feed .yt-icon-frame{
  fill: rgba(0,0,0,.22);
  stroke: rgba(124,255,134,.75);
  stroke-width: 2;
}

#yt-feed .yt-icon-play{
  fill: rgba(124,255,134,.95);
}

#yt-feed .yt-footer .glitch{
  position:relative;
  display:inline-block;
  will-change: transform, filter;
  animation: ytGlitchPulse 4.8s ease-in-out infinite;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(680px, 62vw);
  letter-spacing:.8px;
  text-transform:uppercase;
  font-size:11px;
}

#yt-feed .yt-footer .glitch:before,
#yt-feed .yt-footer .glitch:after{
  content: attr(data-text);
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  filter: blur(.1px);
  white-space:nowrap;
}

#yt-feed .yt-footer .glitch:before{
  transform: translateX(1px);
  text-shadow: -2px 0 rgba(0,255,140,.55);
  clip-path: inset(0 0 55% 0);
}

#yt-feed .yt-footer .glitch:after{
  transform: translateX(-1px);
  text-shadow: 2px 0 rgba(180,255,220,.35);
  clip-path: inset(45% 0 0 0);
}

@keyframes ytGlitchPulse{
  0%, 70%, 100% { filter:none; transform:translateX(0); }
  73% { filter:brightness(1.10); transform:translateX(-0.6px); }
  75% { transform:translateX(0.9px); }
  77% { transform:translateX(-0.7px); }
  79% { filter:brightness(1.14); transform:translateX(0); }
  81% { filter:none; transform:translateX(0); }
}

#yt-feed .yt-footer .glitch.pulse:before,
#yt-feed .yt-footer .glitch.pulse:after{
  opacity:.82;
}

/* Modal */
#yt-modal.yt-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  z-index:9999;
  align-items:center;
  justify-content:center;
}

#yt-modal .yt-frame{
  position:relative;
  width:min(90vw,900px);
  aspect-ratio:16/9;
  border-radius:14px;
  border:1px solid rgba(124,255,134,.52);
  box-shadow: 0 0 26px rgba(124,255,134,.22), 0 0 70px rgba(0,255,140,.12);
  overflow:hidden;
  background:#000;
}

#yt-modal .yt-close{
  position:absolute;
  top:-44px;
  right:0;
  background:none;
  border:none;
  font-size:30px;
  cursor:pointer;
  color:#b8ffd0;
  text-shadow: 0 0 14px rgba(124,255,134,.34);
}

#yt-modal .yt-close:hover{
  filter: brightness(1.12);
}

#yt-modal .yt-player{
  width:100%;
  height:100%;
  border:0;
}

/* Layout helpers */
#yt-items .yt-card__media{
  flex:0 0 160px;
  position:relative;
  z-index:1;
}

#yt-items .yt-card__body{
  flex:1;
  min-width:0;
  position:relative;
  z-index:1;
}

#yt-items .yt-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}

#yt-items .yt-like-count{
  opacity:.75;
}

#yt-items .yt-error{
  color:#ffb4b4;
  padding:10px 0;
}


/* ===============================
   RESPONSIVE: reduce top offset on mobile
   (prevents huge blank space while still avoiding clipping)
   =============================== */

@media (max-width: 640px){
  :root{
    --afBannerPad: 56px;
  }
}


/* ===============================
   REDUCED MOTION
   =============================== */

@media (prefers-reduced-motion: reduce){
  #yt-feed:after,
  #yt-status .yt-dot,
  #yt-items .yt-card:hover .yt-trace,
  #yt-items .yt-card:hover .yt-title[data-text]:before,
  #yt-items .yt-card:hover .yt-title[data-text]:after,
  #yt-items a.yt-like-btn:hover:before,
  #yt-feed .yt-footer .glitch,
  #yt-feed .yt-footer .yt-btn:hover:before{
    animation:none !important;
  }

  #yt-feed .yt-footer .glitch:before,
  #yt-feed .yt-footer .glitch:after{
    display:none;
  }
}
/*--------------------- */
/* ===============================
   SHARED PANEL (Intro/YT-style frame)
   =============================== */

.af-panel{
  position:relative;
  padding:18px 18px 14px;
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;

  /* Same visual language as intro/yt */
  background:
    radial-gradient(1200px 520px at 18% 0%, rgba(75,184,69,.16), rgba(0,0,0,0) 62%),
    radial-gradient(950px 420px at 82% 22%, rgba(0,255,140,.12), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(10,16,12,.95), rgba(3,6,5,.95));

  border:1px solid rgba(75,184,69,.58);
  box-shadow:
    0 18px 48px rgba(0,0,0,.58),
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 0 1px rgba(75,184,69,.20) inset,
    0 0 20px rgba(75,184,69,.20),
    0 0 56px rgba(0,255,140,.11);

  /* keep same spacing convention as YT */
  margin: 20px auto;
}

/* Uses your existing shared centering width rule if you keep it:
   [data-af-intro-stack], #yt-feed.af-yt-feed, .af-after__inner { width: min(var(--afContentMax),100%); ... }
   Add .af-panel too if not already included.
*/
.af-panel{
  width: min(var(--afContentMax), 100%);
  margin-left:auto;
  margin-right:auto;
}

.af-panel__bevel{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 28%),
    linear-gradient(0deg, rgba(0,0,0,.38), rgba(0,0,0,0) 40%);
  opacity:.36;
  z-index:0;
}

.af-panel__depth{
  position:absolute;
  inset:12px;
  border-radius:14px;
  border:1px solid rgba(124,255,134,.18);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55) inset,
    0 0 26px rgba(124,255,134,.10);
  pointer-events:none;
  z-index:0;
}

/* scanlines */
.af-panel::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 10px, rgba(0,0,0,.22) 11px);
  opacity:.32;
  mix-blend-mode:overlay;
  z-index:0;
}

/* sweeping beam */
.af-panel::after{
  content:"";
  position:absolute; inset:-2px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(0,255,140,0), rgba(0,255,140,.16), rgba(0,255,140,0));
  transform:skewX(-14deg);
  left:-60%;
  animation: afPanelSweep 6.4s linear infinite;
  opacity:.58;
  z-index:0;
}

@keyframes afPanelSweep{
  0%{ left:-70%; }
  100%{ left:140%; }
}

.af-panel__status{
  position:relative;
  z-index:1;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:rgba(201,255,214,.92);
}

.af-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(124,255,134,.45);
  background: linear-gradient(180deg, rgba(0,255,140,.12), rgba(0,0,0,.28));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 0 16px rgba(124,255,134,.14);
  white-space:nowrap;
}

.af-dot{
  width:7px; height:7px; border-radius:999px;
  background: rgba(124,255,134,.95);
  box-shadow: 0 0 10px rgba(124,255,134,.35), 0 0 18px rgba(0,255,140,.18);
  animation: afDotPing 1.6s ease-in-out infinite;
  flex:0 0 auto;
}

@keyframes afDotPing{
  0%, 100% { transform: scale(1); opacity: .95; }
  50%      { transform: scale(1.45); opacity: .55; }
}

.af-panel__body{
  position:relative;
  z-index:1;
}

.af-panel__lead{
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(201,255,214,.86);
}

.af-panel__cta{
  margin: 0;
}

.af-linkpill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none !important;
  color:#eaffef !important;
  border:1px solid rgba(124,255,134,.55);
  background: linear-gradient(180deg, rgba(0,255,140,.20), rgba(0,0,0,.45));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 0 0 1px rgba(124,255,134,.12) inset,
    0 0 22px rgba(124,255,134,.16);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  user-select:none;
}

.af-linkpill:hover{ filter: brightness(1.06); }
.af-linkpill:active{ transform: translateY(2px); }

@media (prefers-reduced-motion: reduce){
  .af-panel::after,
  .af-dot{
    animation:none !important;
  }
}


/* ===============================
   YOUTUBE – MATRIX / GLIMMER BACKGROUND
   (adapted from intro module)
   =============================== */

#yt-feed .yt-notes{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode:screen;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='280' viewBox='0 0 140 280'%3E%3Crect width='140' height='280' fill='none'/%3E%3Cg fill='%237CFF86' fill-opacity='0.38' font-family='Arial, Helvetica, sans-serif'%3E%3Ctext x='8' y='26' font-size='18'%3E%E2%99%AA%3C/text%3E%3Ctext x='22' y='64' font-size='16'%3E%E2%99%AB%3C/text%3E%3Ctext x='12' y='104' font-size='18'%3E%E2%99%AC%3C/text%3E%3Ctext x='26' y='144' font-size='16'%3E%E2%99%AA%3C/text%3E%3Ctext x='10' y='186' font-size='18'%3E%E2%99%AB%3C/text%3E%3Ctext x='24' y='232' font-size='16'%3E%E2%99%AC%3C/text%3E%3Ctext x='12' y='270' font-size='18'%3E%E2%99%AA%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 140px 280px;

  filter: drop-shadow(0 0 12px rgba(0,255,140,.18)) contrast(1.04);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,.90),
    rgba(0,0,0,.65) 60%,
    rgba(0,0,0,.10));
          mask-image: linear-gradient(180deg,
    rgba(0,0,0,.90),
    rgba(0,0,0,.65) 60%,
    rgba(0,0,0,.10));

  animation: ytNotesFall 14s linear infinite;
  will-change: background-position, transform;
}

/* second slower layer for depth */
#yt-feed .yt-notes::before{
  content:"";
  position:absolute;
  inset:-22%;
  pointer-events:none;
  opacity:.42;
  mix-blend-mode:screen;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='340' viewBox='0 0 180 340'%3E%3Crect width='180' height='340' fill='none'/%3E%3Cg fill='%237CFF86' fill-opacity='0.30' font-family='Arial, Helvetica, sans-serif'%3E%3Ctext x='10' y='34' font-size='22'%3E%E2%99%AB%3C/text%3E%3Ctext x='34' y='86' font-size='20'%3E%E2%99%AA%3C/text%3E%3Ctext x='12' y='142' font-size='22'%3E%E2%99%AC%3C/text%3E%3Ctext x='38' y='206' font-size='20'%3E%E2%99%AB%3C/text%3E%3Ctext x='10' y='270' font-size='22'%3E%E2%99%AA%3C/text%3E%3Ctext x='34' y='328' font-size='20'%3E%E2%99%AC%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 340px;

  filter: blur(.2px);
  animation: ytNotesFallSlow 22s linear infinite;
}

@keyframes ytNotesFall{
  0%   { background-position: 0 -420px; transform: translateX(0); }
  50%  { background-position: 14px 160px; transform: translateX(-3px); }
  100% { background-position: 0 720px; transform: translateX(0); }
}

@keyframes ytNotesFallSlow{
  0%   { background-position: 0 -560px; transform: translateX(0); }
  100% { background-position: 0 820px; transform: translateX(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #yt-feed .yt-notes,
  #yt-feed .yt-notes::before{
    animation:none !important;
  }
}

/* ===============================
   INSTAGRAM PANEL (image + system UI)
   =============================== */

.af-ig__grid{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:18px;
  align-items:start;
}

@media (max-width: 900px){
  .af-ig__grid{ grid-template-columns: 1fr; }
}

.af-ig__media{
  margin:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(124,255,134,.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset, 0 0 26px rgba(124,255,134,.10);
  position:relative;
}

.af-ig__media img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  filter: contrast(1.05) saturate(.95);
  opacity:.92;
}

.af-ig__caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 12px;
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:rgba(201,255,214,.86);
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.62));
}

.af-ig__body{ min-width:0; }

/* Key/Value system list */
.af-kv{
  border-radius:14px;
  border:1px solid rgba(124,255,134,.16);
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.38));
  box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset;
  padding:10px 12px;
  margin-bottom:12px;
}

.af-kv__row{
  display:flex;
  gap:12px;
  padding:8px 0;
  border-top:1px solid rgba(75,184,69,.16);
}

.af-kv__row:first-child{ border-top:none; }

.af-kv__k{
  width:110px;
  flex:0 0 110px;
  font-size:11px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:rgba(201,255,214,.72);
  font-weight:700;
}

.af-kv__v{
  color:rgba(201,255,214,.92);
  font-size:13px;
  line-height:1.35;
  min-width:0;
}

@media (max-width: 900px){
  .af-kv__k{ width:96px; flex-basis:96px; }
}

/* TINY CAMERA CARD - echt klein */
.af-camcard{
  margin-top:10px;
  display:inline-grid;              /* niet full width */
  grid-template-columns:56px auto;
  gap:10px;
  align-items:center;

  width:auto;
  max-width:420px;                 /* klein blok */

  padding:10px 12px;
  border-radius:14px;

  background:linear-gradient(
    135deg,
    rgba(0,34,18,.55),
    rgba(0,14,8,.82)
  );

  border:1px solid rgba(90,255,140,.10);
  box-shadow:0 0 10px rgba(0,0,0,.18);
}

/* camera */
.af-camcard__img{
  display:flex;
  align-items:center;
  justify-content:center;
}

.af-camcard__img img{
  width:46px;                      /* veel kleiner */
  height:auto;
  transform:rotate(-90deg);
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.35));
}

/* info */
.af-camcard__info{
  border-left:1px solid rgba(90,255,140,.08);
  padding-left:10px;
}

.af-camcard__label{
  font-size:8px;
  letter-spacing:.18em;
  color:#7cff95;
  margin-bottom:3px;
}

.af-camcard__info h3{
  margin:0;
  font-size:13px;
  line-height:1.05;
  color:#eefef1;
}

.af-camcard__info p{
  margin:2px 0 6px;
  font-size:10px;
  color:#8fe7a2;
}

/* specs ultra compact */
.af-camcard__info ul{
  list-style:none;
  margin:0;
  padding:0;
}

.af-camcard__info li{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:8px;
  padding:2px 0;
}

.af-camcard__info li span{
  font-size:9px;
  color:#8ab592;
}

.af-camcard__info li strong{
  font-size:10px;
  font-weight:500;
  color:#f3fff5;
}

/* mobiel */
@media (max-width:900px){
  .af-camcard{
    max-width:100%;
    grid-template-columns:46px 1fr;
  }

  .af-camcard__img img{
    width:38px;
  }
}

/* =====================================================
   SKYCAM PANEL — 3 COLUMN VERSION
   Left: artwork | Middle: details | Right: CTA + camera
   ===================================================== */
/* =========================================================
   NEW FEATURE BANNER — PHOTO GALLERY
   ========================================================= */

.af-feature-banner{
  width:min(var(--afContentMax), 100%);
  margin:20px auto;
  padding:18px 20px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:18px;

  background:
    radial-gradient(
      900px 300px at 12% 0%,
      rgba(124,255,134,.18),
      transparent 60%
    ),
    linear-gradient(
      110deg,
      rgba(8,18,11,.97),
      rgba(3,8,5,.96)
    );

  border:1px solid rgba(124,255,134,.58);

  box-shadow:
    0 18px 48px rgba(0,0,0,.58),
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 0 0 1px rgba(124,255,134,.16) inset,
    0 0 24px rgba(124,255,134,.16),
    0 0 56px rgba(0,255,140,.08);
}

.af-feature-banner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 10px,
    rgba(0,0,0,.20) 11px
  );

  opacity:.30;
  mix-blend-mode:overlay;
  z-index:0;
}

.af-feature-banner__scan{
  position:absolute;
  top:-100%;
  left:-20%;
  width:140%;
  height:90%;

  background:linear-gradient(
    180deg,
    transparent,
    rgba(124,255,134,.12),
    transparent
  );

  transform:skewY(-8deg);
  animation:afFeatureScan 5.8s linear infinite;
  pointer-events:none;
  z-index:0;
}

@keyframes afFeatureScan{
  from{
    top:-110%;
  }

  to{
    top:150%;
  }
}

.af-feature-banner__bevel{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.09),
      transparent 25%
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,.38),
      transparent 42%
    );
}

.af-feature-banner__label,
.af-feature-banner__content{
  position:relative;
  z-index:1;
}

.af-feature-banner__label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:6px 10px;

  border:1px solid rgba(124,255,134,.48);
  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(0,255,140,.14),
      rgba(0,0,0,.28)
    );

  color:rgba(220,255,228,.92);
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}

.af-feature-banner__dot{
  width:7px;
  height:7px;
  border-radius:50%;

  background:#7cff86;

  box-shadow:
    0 0 8px rgba(124,255,134,.65),
    0 0 18px rgba(0,255,140,.30);

  animation:afFeatureDot 1.6s ease-in-out infinite;
}

@keyframes afFeatureDot{
  0%,
  100%{
    opacity:1;
    transform:scale(1);
  }

  50%{
    opacity:.55;
    transform:scale(1.45);
  }
}

.af-feature-banner__content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
}

.af-feature-banner__text{
  min-width:0;
}

.af-feature-banner__eyebrow{
  display:block;
  margin-bottom:6px;

  color:rgba(201,255,214,.62);
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.af-feature-banner h2{
  margin:0 0 7px;

  color:#7cff86;
  font-size:clamp(24px, 4vw, 38px);
  line-height:1;

  text-shadow:
    0 0 12px rgba(124,255,134,.25),
    0 0 30px rgba(0,255,140,.10);
}

.af-feature-banner p{
  max-width:690px;
  margin:0;

  color:rgba(201,255,214,.82);
  font-size:13px;
  line-height:1.5;
}

.af-feature-banner__button{
  flex:0 0 auto;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  padding:12px 16px;
  border-radius:14px;

  color:#eaffef !important;
  text-decoration:none !important;

  border:1px solid rgba(124,255,134,.62);

  background:
    linear-gradient(
      180deg,
      rgba(0,255,140,.22),
      rgba(0,0,0,.46)
    );

  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 0 0 1px rgba(124,255,134,.10) inset,
    0 8px 0 rgba(0,0,0,.48),
    0 0 22px rgba(124,255,134,.16);

  font-size:11px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;

  transition:
    transform .14s ease,
    filter .14s ease,
    box-shadow .14s ease;
}

.af-feature-banner__button:hover{
  filter:brightness(1.10);
  transform:translateY(-2px);
}

.af-feature-banner__button:active{
  transform:translateY(5px);

  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 0 0 1px rgba(124,255,134,.10) inset,
    0 2px 0 rgba(0,0,0,.48),
    0 0 18px rgba(124,255,134,.14);
}

@media (max-width:700px){
  .af-feature-banner{
    margin-top:16px;
    margin-bottom:16px;
    padding:17px;
  }

  .af-feature-banner__content{
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
  }

  .af-feature-banner__button{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .af-feature-banner__scan,
  .af-feature-banner__dot{
    animation:none;
  }
}

/* =========================================================
   PHOTO ARCHIVE HOMEPAGE PREVIEW V2
   text left / latest cached thumbnail right
   ========================================================= */
.af-archive-preview{
  width:min(var(--afContentMax),100%);
  margin:20px auto;
  padding:18px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(124,255,134,.48);
  border-radius:18px;
  background:
    radial-gradient(650px 260px at 0 0,rgba(124,255,134,.12),transparent 65%),
    linear-gradient(145deg,rgba(7,24,13,.95),rgba(1,8,5,.98));
  box-shadow:0 18px 48px rgba(0,0,0,.48),inset 0 0 0 1px rgba(124,255,134,.06),0 0 28px rgba(0,255,120,.08);
  isolation:isolate;
}
.af-archive-preview::before{
  content:"";position:absolute;inset:10px;pointer-events:none;
  border:1px solid rgba(124,255,134,.10);border-radius:12px;
}
.af-archive-preview__scan{
  position:absolute;top:0;bottom:0;left:-35%;width:28%;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(124,255,134,.07),transparent);
  transform:skewX(-16deg);animation:afArchiveSweep 8s linear infinite;
}
@keyframes afArchiveSweep{to{left:130%}}
.af-archive-preview__topline{
  position:relative;z-index:2;display:flex;justify-content:space-between;gap:18px;
  padding:0 4px 13px;margin-bottom:14px;border-bottom:1px solid rgba(124,255,134,.18);
  font-size:9px;letter-spacing:1.2px;color:rgba(201,255,214,.55);
}
.af-archive-preview__status{color:#baffc5}
.af-archive-preview__status i{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#7cff86;box-shadow:0 0 9px #7cff86}
.af-archive-preview__grid{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);gap:14px;align-items:stretch;
}
.af-archive-preview__copy{
  min-height:330px;padding:26px 26px 20px;display:flex;flex-direction:column;position:relative;
  border:1px solid rgba(124,255,134,.20);
  background:linear-gradient(150deg,rgba(0,255,120,.055),rgba(0,5,3,.72));
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.af-archive-preview__copy::before,.af-archive-preview__copy::after{content:"";position:absolute;background:#7cff86;opacity:.55}
.af-archive-preview__copy::before{left:0;top:0;width:55px;height:1px}.af-archive-preview__copy::after{left:0;top:0;width:1px;height:55px}
.af-archive-preview__eyebrow{font-size:9px;letter-spacing:1.7px;color:rgba(201,255,214,.48)}
.af-archive-preview h2{margin:9px 0 8px;color:#7cff86;font-size:clamp(29px,3.2vw,43px);line-height:1;text-shadow:0 0 18px rgba(124,255,134,.18)}
.af-archive-preview__meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.af-archive-preview__meta span,.af-archive-preview__location{
  padding:5px 8px;border:1px solid rgba(124,255,134,.18);background:rgba(0,0,0,.25);
  font-size:8px;letter-spacing:.9px;color:rgba(201,255,214,.65)
}
.af-archive-preview__copy p{margin:0 0 20px;max-width:520px;color:rgba(214,255,222,.78);font-size:13px;line-height:1.55}
.af-archive-preview__location{margin:-8px 0 18px;width:max-content;max-width:100%}.af-archive-preview__location span{color:#7cff86;margin-right:8px}
.af-archive-preview__button{
  width:max-content;max-width:100%;margin-top:auto;display:flex;align-items:center;gap:22px;padding:12px 15px;
  color:#effff2!important;text-decoration:none!important;font-size:10px;font-weight:800;letter-spacing:1px;
  border:1px solid rgba(124,255,134,.52);background:linear-gradient(180deg,rgba(0,255,120,.13),rgba(0,0,0,.42));
  box-shadow:0 6px 0 rgba(0,0,0,.38),0 0 18px rgba(124,255,134,.09);
  transition:.18s ease;
}
.af-archive-preview__button b{font-size:18px;color:#7cff86;transition:transform .18s ease}
.af-archive-preview__button:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(0,0,0,.32),0 0 28px rgba(124,255,134,.20);filter:brightness(1.12)}
.af-archive-preview__button:hover b{transform:translateX(5px)}
.af-archive-preview__sys{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:10px;border-top:1px solid rgba(124,255,134,.13);font-size:7px;letter-spacing:.8px;color:rgba(201,255,214,.30)}
.af-archive-preview__sys span{color:rgba(124,255,134,.72)}

.af-archive-preview__visual{
  min-height:330px;position:relative;overflow:hidden;display:block;background:#000;
  border:1px solid rgba(124,255,134,.32);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:inset 0 0 0 1px #000;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.af-archive-preview__visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:linear-gradient(135deg,rgba(124,255,134,.10),transparent 30%,transparent 70%,rgba(0,255,120,.08));
}
.af-archive-preview__visual img{width:100%;height:100%;min-height:330px;display:block;object-fit:cover;transition:transform .65s cubic-bezier(.2,.8,.2,1),filter .3s ease}
.af-archive-preview__capture,.af-archive-preview__view{
  position:absolute;z-index:4;padding:6px 8px;background:rgba(0,8,4,.78);backdrop-filter:blur(5px);
  border:1px solid rgba(124,255,134,.32);font-size:8px;letter-spacing:1px;color:#c9ffd6
}
.af-archive-preview__capture{left:12px;top:12px}.af-archive-preview__view{right:12px;bottom:12px;opacity:0;transform:translateY(8px);transition:.22s ease}
.af-archive-preview__corner{position:absolute;z-index:4;width:34px;height:34px;opacity:.75;transition:.22s ease}
.af-archive-preview__corner--tl{left:9px;top:9px;border-left:1px solid #7cff86;border-top:1px solid #7cff86}
.af-archive-preview__corner--br{right:9px;bottom:9px;border-right:1px solid #7cff86;border-bottom:1px solid #7cff86}
.af-archive-preview__reticle{
  position:absolute;z-index:4;left:50%;top:50%;width:52px;height:52px;border:1px solid rgba(124,255,134,.72);border-radius:50%;
  transform:translate(-50%,-50%) scale(1.5);opacity:0;transition:.25s ease;box-shadow:0 0 24px rgba(124,255,134,.16)
}
.af-archive-preview__reticle::before,.af-archive-preview__reticle::after{content:"";position:absolute;background:rgba(124,255,134,.7)}
.af-archive-preview__reticle::before{width:72px;height:1px;left:-11px;top:25px}.af-archive-preview__reticle::after{height:72px;width:1px;left:25px;top:-11px}
.af-archive-preview__visual:hover{transform:translateY(-4px);border-color:rgba(124,255,134,.78);box-shadow:0 16px 32px rgba(0,0,0,.48),0 0 30px rgba(0,255,120,.17)}
.af-archive-preview__visual:hover img{transform:scale(1.045);filter:saturate(1.08) contrast(1.04)}
.af-archive-preview__visual:hover::after{opacity:1}
.af-archive-preview__visual:hover .af-archive-preview__view{opacity:1;transform:none}
.af-archive-preview__visual:hover .af-archive-preview__reticle{opacity:.75;transform:translate(-50%,-50%) scale(1)}
.af-archive-preview__visual:hover .af-archive-preview__corner{width:48px;height:48px;opacity:1}

@media(max-width:760px){
  .af-archive-preview__telemetry{display:none}
  .af-archive-preview__grid{grid-template-columns:1fr}
  .af-archive-preview__copy{min-height:0}
  .af-archive-preview__visual,.af-archive-preview__visual img{min-height:240px}
}
@media(prefers-reduced-motion:reduce){
  .af-archive-preview__scan{animation:none}.af-archive-preview__visual,.af-archive-preview__visual img{transition:none}
}

/* Gallery chip typography: match SKYCam chip exactly.
   .af-archive-preview__topline otherwise forces 9px / dimmed text. */
.af-archive-preview__topline .af-chip{
  font-size:12px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:rgba(201,255,214,.92);
}


/* =========================================================
   PHOTO ARCHIVE HOMEPAGE PREVIEW — hierarchy refinement
   PHOTO GALLERY = section identity; latest photo title = secondary
   ========================================================= */
.af-archive-preview__heading{
  margin:0 0 16px;
}

.af-archive-preview__section-title{
  margin:0 0 5px !important;
  color:#7cff86;
  font-size:clamp(28px,2.2vw,34px) !important;
  line-height:1.02;
  font-weight:800;
  letter-spacing:-.5px;
  text-transform:none;
  text-shadow:0 0 18px rgba(124,255,134,.14);
}

.af-archive-preview__heading .af-archive-preview__eyebrow{
  display:block;
  margin:0;
  font-size:10px;
  letter-spacing:1.5px;
  color:rgba(201,255,214,.58);
}

.af-archive-preview__copy .af-archive-preview__photo-title{
  margin:0 0 10px;
  color:#7cff86;
  font-size:clamp(25px,2vw,30px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.25px;
  text-shadow:0 0 16px rgba(124,255,134,.12);
}

@media (max-width:700px){
  .af-archive-preview__section-title{
    font-size:27px !important;
  }
  .af-archive-preview__copy .af-archive-preview__photo-title{
    font-size:24px;
  }
}


/* =========================================================
   PHOTO GALLERY // CYBERPUNK VISUAL SUBSYSTEM
   Deliberately expressive HUD styling for homepage archive.
   ========================================================= */
.af-archive-preview__copy{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(35,255,94,.075),transparent 31%),
    radial-gradient(circle at 8% 8%,rgba(75,255,126,.10),transparent 30%),
    linear-gradient(180deg,rgba(0,30,18,.88),rgba(0,12,8,.96));
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:
    inset 0 0 0 1px rgba(70,255,112,.18),
    inset 0 0 34px rgba(0,255,90,.035);
}

.af-archive-preview__copy::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.22;
  background:
    repeating-linear-gradient(0deg,transparent 0 7px,rgba(104,255,137,.055) 8px),
    linear-gradient(90deg,transparent 0 68%,rgba(83,255,122,.08) 68% 68.2%,transparent 68.2%);
  mask-image:linear-gradient(to bottom,#000,transparent 82%);
}

.af-archive-preview__copy::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-55%;
  width:42%;
  height:190%;
  pointer-events:none;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(106,255,139,.07),transparent);
  transition:left .8s cubic-bezier(.2,.7,.2,1);
}
.af-archive-preview:hover .af-archive-preview__copy::after{left:125%;}

.af-archive-preview__microcode{
  margin:0 0 18px;
  color:rgba(120,255,151,.35);
  font-size:8px;
  line-height:1;
  letter-spacing:1.65px;
  white-space:nowrap;
}

.af-archive-preview__kicker{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:8px;
  font-size:8px;
  letter-spacing:1.7px;
  color:rgba(191,255,206,.55);
}
.af-archive-preview__kicker::before{
  content:"";
  width:7px;height:7px;
  border:1px solid #64ff7b;
  transform:rotate(45deg);
  box-shadow:0 0 9px rgba(86,255,115,.75);
}
.af-archive-preview__kicker b{
  margin-left:auto;
  font-size:7px;
  font-weight:500;
  color:rgba(115,255,145,.35);
}

.af-archive-preview__section-title{
  position:relative;
  display:inline-block;
  margin:0 !important;
  color:#72ff82 !important;
  font-size:clamp(30px,2.45vw,39px) !important;
  line-height:.96 !important;
  font-weight:900 !important;
  letter-spacing:1.1px !important;
  text-transform:uppercase !important;
  text-shadow:
    0 0 8px rgba(83,255,110,.28),
    0 0 26px rgba(51,255,96,.13);
}
.af-archive-preview__section-title::before{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:-1;
  transform:translate(3px,2px);
  color:transparent;
  -webkit-text-stroke:1px rgba(91,255,120,.16);
  filter:blur(.2px);
}
.af-archive-preview__section-title::after{
  content:"";
  position:absolute;
  left:0;right:-42px;bottom:-10px;
  height:1px;
  background:linear-gradient(90deg,#69ff7d 0 28%,rgba(105,255,125,.18) 28% 72%,transparent);
  box-shadow:0 0 8px rgba(90,255,119,.35);
}

.af-archive-preview__signal-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin:18px 0 20px;
  width:min(100%,390px);
  color:rgba(198,255,210,.62);
  font-size:9px;
  letter-spacing:1.9px;
}
.af-archive-preview__signal-line i{
  display:block;
  height:1px;
  background:rgba(87,255,119,.25);
}
.af-archive-preview__signal-line i:first-child{width:22px;background:#67ff7d;box-shadow:0 0 7px rgba(90,255,116,.5)}
.af-archive-preview__signal-line i:last-child{flex:1}

.af-archive-preview__copy .af-archive-preview__photo-title{
  position:relative;
  margin:0 0 12px;
  max-width:94%;
  color:#b9ffc5;
  font-size:clamp(23px,1.8vw,29px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:.1px;
  text-shadow:0 0 14px rgba(75,255,108,.12);
}
.af-archive-preview__copy .af-archive-preview__photo-title::before{
  content:"//";
  margin-right:9px;
  color:#5fff76;
  font-weight:400;
  opacity:.72;
}

.af-hud-corner{
  position:absolute;
  width:31px;height:31px;
  pointer-events:none;
  opacity:.72;
}
.af-hud-corner--tl{
  top:0;left:0;
  border-top:1px solid #66ff7c;
  border-left:1px solid #66ff7c;
}
.af-hud-corner--br{
  right:0;bottom:0;
  border-right:1px solid #66ff7c;
  border-bottom:1px solid #66ff7c;
}

.af-archive-preview__media{
  position:relative;
  overflow:hidden;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.af-archive-preview__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(65,255,101,.14),transparent 10%,transparent 90%,rgba(65,255,101,.07)),
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(108,255,135,.018) 6px);
  box-shadow:inset 0 0 0 1px rgba(91,255,119,.18);
}

.af-archive-preview__scan{
  position:absolute;
  z-index:4;
  left:0;right:0;top:-10%;
  height:2px;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#78ff8c 18%,rgba(120,255,140,.75) 65%,transparent);
  box-shadow:0 0 13px rgba(99,255,127,.8);
}
.af-archive-preview:hover .af-archive-preview__scan{
  animation:afGalleryScan 1.35s ease-out 1;
}
@keyframes afGalleryScan{
  0%{top:0;opacity:0}
  10%{opacity:.75}
  85%{opacity:.35}
  100%{top:100%;opacity:0}
}

.af-archive-preview__reticle{
  position:absolute;
  z-index:5;
  right:20px;
  bottom:18px;
  width:44px;height:44px;
  opacity:.45;
  pointer-events:none;
}
.af-archive-preview__reticle::before,
.af-archive-preview__reticle::after{
  content:"";
  position:absolute;
  border:1px solid rgba(104,255,130,.65);
}
.af-archive-preview__reticle::before{
  inset:9px;border-radius:50%;
}
.af-archive-preview__reticle::after{
  inset:16px;border-radius:50%;
  box-shadow:0 0 8px rgba(90,255,116,.45);
}
.af-archive-preview__reticle i:first-child{
  position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(102,255,128,.48);
}
.af-archive-preview__reticle i:last-child{
  position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(102,255,128,.48);
}

.af-archive-preview__button{
  position:relative;
  overflow:hidden;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  background:
    linear-gradient(110deg,rgba(35,255,87,.08),transparent 45%),
    rgba(0,24,13,.72);
  box-shadow:
    inset 0 0 0 1px rgba(87,255,116,.2),
    0 8px 24px rgba(0,0,0,.2);
}
.af-archive-preview__button::before{
  content:"";
  position:absolute;
  left:-45%;top:0;
  width:35%;height:100%;
  transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(120,255,142,.16),transparent);
  transition:left .45s ease;
}
.af-archive-preview__button:hover::before{left:120%}
.af-archive-preview__button span:last-child{
  transition:transform .22s ease,text-shadow .22s ease;
}
.af-archive-preview__button:hover span:last-child{
  transform:translateX(6px);
  text-shadow:0 0 10px #71ff87;
}

@media (prefers-reduced-motion:reduce){
  .af-archive-preview:hover .af-archive-preview__scan{animation:none}
  .af-archive-preview__copy::after,
  .af-archive-preview__button::before{transition:none}
}

@media(max-width:700px){
  .af-archive-preview__section-title{font-size:29px !important}
  .af-archive-preview__microcode{white-space:normal;line-height:1.5}
}


/* =========================================================
   SKYCAM // VISUAL SUBSYSTEM
   Unified with PHOTO GALLERY HUD styling.
   ========================================================= */
#af-ig{
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(54,255,99,.045),transparent 35%),
    rgba(0,24,14,.78);
}

#af-ig .af-skycam__status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(91,255,119,.17);
}
#af-ig .af-skycam__online{
  color:rgba(169,255,187,.52);
  font-size:8px;
  letter-spacing:1.7px;
  text-transform:uppercase;
}

#af-ig .af-ig__grid{
  display:grid;
  grid-template-columns:minmax(230px,.82fr) minmax(350px,1.42fr) minmax(300px,1.02fr);
  gap:18px;
  align-items:stretch;
  margin-top:18px;
}

/* Left visual node */
#af-ig .af-skycam__media{
  position:relative;
  min-height:285px;
  overflow:hidden;
  margin:0;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  background:#00130b;
  box-shadow:
    inset 0 0 0 1px rgba(91,255,119,.22),
    inset 0 0 32px rgba(0,255,88,.035);
}
#af-ig .af-skycam__media::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(110,255,136,.018) 6px),
    linear-gradient(90deg,rgba(70,255,104,.10),transparent 18%,transparent 86%,rgba(70,255,104,.05));
  box-shadow:inset 0 0 0 1px rgba(91,255,119,.18);
}
#af-ig .af-skycam__media img{
  width:100%;
  height:100%;
  min-height:285px;
  display:block;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease;
}
#af-ig:hover .af-skycam__media img{
  transform:scale(1.018);
  filter:brightness(1.04) contrast(1.03);
}
#af-ig .af-skycam__micro{
  position:absolute;
  z-index:6;
  top:12px;
  left:13px;
  padding:5px 7px;
  color:rgba(190,255,204,.72);
  background:rgba(0,20,11,.80);
  border:1px solid rgba(94,255,122,.26);
  font-size:6px;
  letter-spacing:1.25px;
}
#af-ig .af-ig__caption{
  position:absolute;
  z-index:6;
  left:14px;
  right:14px;
  bottom:12px;
  padding:9px 10px;
  color:#c6ffd1;
  background:rgba(0,19,11,.76);
  border-top:1px solid rgba(96,255,124,.25);
  font-size:9px;
  letter-spacing:1.4px;
}
#af-ig .af-skycam__scan{
  position:absolute;
  z-index:7;
  left:0;right:0;top:-5%;
  height:1px;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#78ff8c 18%,rgba(120,255,140,.75) 65%,transparent);
  box-shadow:0 0 12px rgba(99,255,127,.75);
}
#af-ig:hover .af-skycam__scan{animation:afSkycamScan 1.4s ease-out 1}
@keyframes afSkycamScan{
  0%{top:0;opacity:0}
  12%{opacity:.75}
  85%{opacity:.32}
  100%{top:100%;opacity:0}
}
#af-ig .af-skycam__reticle{
  position:absolute;
  z-index:6;
  right:22px;
  top:50%;
  width:58px;height:58px;
  transform:translateY(-50%);
  border:1px solid rgba(104,255,130,.32);
  border-radius:50%;
  pointer-events:none;
}
#af-ig .af-skycam__reticle::before,
#af-ig .af-skycam__reticle::after{
  content:"";
  position:absolute;
  background:rgba(104,255,130,.38);
}
#af-ig .af-skycam__reticle::before{left:50%;top:-22px;width:1px;height:102px}
#af-ig .af-skycam__reticle::after{top:50%;left:-22px;width:102px;height:1px}

/* Middle telemetry console */
#af-ig .af-ig__body{
  position:relative;
  min-width:0;
  padding:18px;
  overflow:hidden;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  background:
    radial-gradient(circle at 8% 10%,rgba(72,255,111,.075),transparent 34%),
    linear-gradient(180deg,rgba(0,31,18,.90),rgba(0,15,9,.96));
  box-shadow:
    inset 0 0 0 1px rgba(83,255,113,.18),
    inset 0 0 30px rgba(0,255,87,.025);
}
#af-ig .af-ig__body::before{
  content:"";
  position:absolute;
  top:-45%;left:-48%;
  width:34%;height:190%;
  transform:skewX(-18deg);
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(106,255,139,.07),transparent);
  transition:left .8s cubic-bezier(.2,.7,.2,1);
}
#af-ig:hover .af-ig__body::before{left:125%}
#af-ig .af-skycam__console-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 13px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(90,255,119,.14);
  color:rgba(177,255,193,.60);
  font-size:8px;
  letter-spacing:1.6px;
}
#af-ig .af-skycam__console-label::before{
  content:"";
  width:7px;height:7px;
  border:1px solid #64ff7b;
  transform:rotate(45deg);
  box-shadow:0 0 8px rgba(86,255,115,.6);
}
#af-ig .af-skycam__console-label b{
  margin-left:auto;
  color:rgba(112,255,142,.30);
  font-size:7px;
  font-weight:500;
}
#af-ig .af-kv{
  padding:0;
  background:transparent;
  border:0;
}
#af-ig .af-kv__row{
  display:grid;
  grid-template-columns:115px 1fr;
  gap:14px;
  padding:15px 0;
  border-top:1px solid rgba(87,255,116,.12);
}
#af-ig .af-kv__row:first-child{border-top:0}
#af-ig .af-kv__k{
  color:rgba(185,255,199,.66);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
}
#af-ig .af-kv__v{
  color:#d3ffdc;
  font-size:13px;
}
#af-ig .af-panel__lead{display:none}

/* Right control + optical hardware node */
#af-ig .af-ig__side{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:14px;
  min-width:0;
}
#af-ig .af-panel__cta{margin:0}
#af-ig .af-linkpill{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  overflow:hidden;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  background:
    linear-gradient(110deg,rgba(35,255,87,.09),transparent 45%),
    rgba(0,24,13,.78);
  border:1px solid rgba(90,255,119,.48);
  box-shadow:
    inset 0 0 0 1px rgba(87,255,116,.10),
    0 8px 24px rgba(0,0,0,.20),
    0 0 18px rgba(48,255,92,.04);
}
#af-ig .af-linkpill::before{
  content:"";
  position:absolute;
  left:-45%;top:0;
  width:34%;height:100%;
  transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(120,255,142,.17),transparent);
  transition:left .48s ease;
}
#af-ig .af-linkpill:hover::before{left:120%}
#af-ig .af-linkpill:hover{
  filter:brightness(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(87,255,116,.18),
    0 0 24px rgba(55,255,96,.09);
}

#af-ig .af-skycam__hardware{
  position:relative;
  display:grid;
  grid-template-columns:minmax(110px,.75fr) minmax(170px,1.25fr);
  gap:14px;
  align-items:center;
  min-height:215px;
  padding:20px 16px 15px;
  overflow:hidden;
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 13px);
  background:
    linear-gradient(135deg,rgba(52,255,96,.065),transparent 38%),
    rgba(0,19,11,.90);
  border:0;
  box-shadow:
    inset 0 0 0 1px rgba(85,255,114,.18),
    inset 0 0 25px rgba(0,255,88,.025);
}
#af-ig .af-skycam__hardware::after{
  content:"";
  position:absolute;
  right:14px;bottom:14px;
  width:30px;height:30px;
  border-right:1px solid rgba(103,255,129,.58);
  border-bottom:1px solid rgba(103,255,129,.58);
  pointer-events:none;
}
#af-ig .af-skycam__hardware-code{
  position:absolute;
  top:11px;right:13px;
  color:rgba(111,255,141,.33);
  font-size:6px;
  letter-spacing:1.35px;
}
#af-ig .af-camcard__img{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
#af-ig .af-camcard__img img{
  width:min(100%,125px);
  height:auto;
  filter:drop-shadow(0 0 12px rgba(74,255,109,.10));
  transition:transform .35s ease,filter .35s ease;
}
#af-ig .af-skycam__hardware:hover .af-camcard__img img{
  transform:translateY(-3px) scale(1.025);
  filter:drop-shadow(0 0 17px rgba(74,255,109,.18));
}
#af-ig .af-camcard__info{min-width:0}
#af-ig .af-camcard__label{
  color:#72ff87;
  font-size:8px;
  letter-spacing:1.45px;
}
#af-ig .af-camcard__info h3{
  margin:5px 0 2px;
  color:#e5ffe9;
  font-size:17px;
}
#af-ig .af-camcard__info p{
  margin:0 0 12px;
  color:#8cff9f;
  font-size:10px;
}
#af-ig .af-camcard__info ul{
  list-style:none;
  padding:0;margin:0;
}
#af-ig .af-camcard__info li{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:8px;
  margin:5px 0;
  font-size:9px;
}
#af-ig .af-camcard__info li span{color:rgba(177,255,193,.56)}
#af-ig .af-camcard__info li strong{color:#e0ffe6;font-weight:500}

@media(max-width:1050px){
  #af-ig .af-ig__grid{grid-template-columns:minmax(210px,.8fr) minmax(330px,1.2fr)}
  #af-ig .af-ig__side{grid-column:1/-1;grid-template-columns:1fr 1.5fr;grid-template-rows:auto}
}
@media(max-width:760px){
  #af-ig .af-skycam__status{align-items:flex-start;flex-direction:column}
  #af-ig .af-ig__grid{grid-template-columns:1fr}
  #af-ig .af-ig__side{grid-column:auto;grid-template-columns:1fr}
  #af-ig .af-kv__row{grid-template-columns:92px 1fr}
  #af-ig .af-skycam__hardware{grid-template-columns:110px 1fr}
}
@media(prefers-reduced-motion:reduce){
  #af-ig:hover .af-skycam__scan{animation:none}
  #af-ig .af-ig__body::before,
  #af-ig .af-linkpill::before{transition:none}
}




/* =========================================================
   VISUAL SUBSYSTEM REDESIGN // 2ADVANCED-INSPIRED
   Whole-screen composition: motion, depth, ambient data.
   ========================================================= */

/* Gallery ambient "camera matrix" — decorative capture glyphs instead of music notes */
#af-ig{position:relative;overflow:hidden;isolation:isolate}
#af-ig > *:not(.af-camera-rain){position:relative;z-index:2}
.af-camera-rain{
  position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  opacity:.19;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 80%,transparent 100%);
}
.af-camera-rain span{
  position:absolute;top:-12%;color:#64ff7d;
  font-family:monospace;font-size:14px;line-height:1;
  text-shadow:0 0 7px rgba(76,255,105,.55);
  animation:afCameraFall linear infinite;
}
.af-camera-rain span:nth-child(1){left:3%;animation-duration:13s;animation-delay:-4s}
.af-camera-rain span:nth-child(2){left:9%;animation-duration:18s;animation-delay:-11s}
.af-camera-rain span:nth-child(3){left:16%;animation-duration:15s;animation-delay:-7s}
.af-camera-rain span:nth-child(4){left:23%;animation-duration:21s;animation-delay:-16s}
.af-camera-rain span:nth-child(5){left:31%;animation-duration:14s;animation-delay:-3s}
.af-camera-rain span:nth-child(6){left:38%;animation-duration:19s;animation-delay:-12s}
.af-camera-rain span:nth-child(7){left:45%;animation-duration:16s;animation-delay:-8s}
.af-camera-rain span:nth-child(8){left:52%;animation-duration:23s;animation-delay:-17s}
.af-camera-rain span:nth-child(9){left:59%;animation-duration:17s;animation-delay:-5s}
.af-camera-rain span:nth-child(10){left:66%;animation-duration:20s;animation-delay:-14s}
.af-camera-rain span:nth-child(11){left:72%;animation-duration:15s;animation-delay:-9s}
.af-camera-rain span:nth-child(12){left:78%;animation-duration:24s;animation-delay:-19s}
.af-camera-rain span:nth-child(13){left:83%;animation-duration:18s;animation-delay:-6s}
.af-camera-rain span:nth-child(14){left:88%;animation-duration:22s;animation-delay:-15s}
.af-camera-rain span:nth-child(15){left:92%;animation-duration:14s;animation-delay:-10s}
.af-camera-rain span:nth-child(16){left:96%;animation-duration:19s;animation-delay:-2s}
.af-camera-rain span:nth-child(17){left:35%;animation-duration:26s;animation-delay:-20s}
.af-camera-rain span:nth-child(18){left:69%;animation-duration:25s;animation-delay:-13s}
@keyframes afCameraFall{
  0%{transform:translate3d(0,-40px,0) rotate(0);opacity:0}
  8%{opacity:.85}
  70%{opacity:.45}
  100%{transform:translate3d(12px,720px,0) rotate(55deg);opacity:0}
}

/* Integrated subsystem identity — signage belongs to the column, never its own empty grid row */
.af-system-marquee{
  --m:#69ff80;
  position:relative;
  width:100%;
  max-width:430px;
  margin:0 0 27px;
  padding:11px 15px 12px 18px;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(54,255,91,.075),transparent 38%),
    repeating-linear-gradient(0deg,transparent 0 6px,rgba(100,255,125,.022) 7px);
  border-left:1px solid rgba(105,255,128,.75);
  border-right:1px solid rgba(105,255,128,.18);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow:inset 0 1px rgba(105,255,128,.38),inset 0 -1px rgba(105,255,128,.25);
}
.af-system-marquee::after{
  content:"";position:absolute;top:0;bottom:0;left:-35%;width:18%;
  background:linear-gradient(90deg,transparent,rgba(124,255,145,.12),transparent);
  transform:skewX(-18deg);animation:afSubsystemSweep 8s ease-in-out infinite;
}
.af-system-marquee__status{
  display:flex;align-items:center;gap:7px;
  color:rgba(177,255,190,.75);font-size:7px;font-weight:700;
  letter-spacing:1.65px;text-transform:uppercase;
}
.af-system-marquee__status i{
  width:6px;height:6px;border-radius:50%;background:var(--m);
  box-shadow:0 0 5px var(--m),0 0 12px rgba(105,255,128,.5);
  animation:afStatusPulse 3.8s ease-in-out infinite;
}
.af-system-marquee__status b{margin-left:auto;font-weight:500;color:rgba(105,255,128,.38)}
.af-system-marquee__title{
  position:relative;display:inline-block;margin:7px 0 5px;
  color:#72ff87;font-size:clamp(28px,3.2vw,43px);line-height:.95;font-weight:900;
  letter-spacing:1.6px;text-transform:uppercase;
  text-shadow:0 0 2px rgba(158,255,172,.85),0 0 11px rgba(68,255,99,.16),3px 3px rgba(20,102,42,.34);
  animation:afSignFlicker 11s steps(1,end) infinite;
}
.af-system-marquee__title::after{
  content:attr(data-text);position:absolute;inset:0;color:rgba(112,255,135,.26);
  transform:translate(2px,1px);clip-path:inset(58% 0 28% 0);pointer-events:none;
}
.af-system-marquee__trace{height:5px;position:relative;margin-top:2px;border-top:1px solid rgba(105,255,128,.28)}
.af-system-marquee__trace span{
  position:absolute;top:-1px;left:0;width:34%;height:1px;background:var(--m);
  box-shadow:0 0 7px rgba(105,255,128,.35);animation:afTrace 5.5s ease-in-out infinite;
}
.af-system-marquee__meta{
  margin-top:4px;color:rgba(157,255,174,.48);font-size:7px;letter-spacing:1.55px;text-transform:uppercase;
}

/* Skycam variant: compact, integrated into artwork column */
.af-system-marquee--skycam{
  max-width:none;margin:0 0 10px;padding:8px 12px 9px 14px;
}
.af-system-marquee--skycam .af-system-marquee__title{
  font-size:clamp(24px,2.4vw,34px);margin:5px 0 4px;
}

/* Hover energy: panels wake up rather than merely changing border colour */
#af-ig .af-system-marquee,
.af-skycam .af-system-marquee{transition:filter .35s ease,transform .35s ease,box-shadow .35s ease}
#af-ig:hover .af-system-marquee,
.af-skycam:hover .af-system-marquee{
  filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:inset 0 1px rgba(105,255,128,.55),inset 0 -1px rgba(105,255,128,.32),0 0 22px rgba(55,255,91,.045);
}

/* Keep Skycam artwork HUD away from embedded logo */
#af-ig .af-skycam__micro,
.af-skycam__micro{left:auto!important;right:12px!important;top:12px!important}

/* Keyframes */
@keyframes afSubsystemSweep{
  0%,62%{left:-35%;opacity:0}68%{opacity:1}82%{left:125%;opacity:.55}83%,100%{opacity:0}
}
@keyframes afTrace{0%,100%{left:0;width:22%}48%{left:48%;width:46%}72%{left:76%;width:18%}}
@keyframes afStatusPulse{0%,76%,100%{opacity:1}82%{opacity:.35}87%{opacity:1}}
@keyframes afSignFlicker{
  0%,13%,13.6%,14.1%,54%,54.7%,55.1%,88%,88.5%,100%{opacity:1;filter:brightness(1)}
  13.25%{opacity:.35;filter:brightness(.6)}
  13.8%{opacity:.9;filter:brightness(1.5)}
  54.25%{opacity:.18;filter:brightness(.5)}
  54.42%{opacity:1;filter:brightness(1.7)}
  54.82%{opacity:.68;filter:brightness(.82)}
  88.25%{opacity:.42;filter:brightness(.65)}
  88.36%{opacity:1;filter:brightness(1.45)}
}
@media(prefers-reduced-motion:reduce){
  .af-camera-rain span,.af-system-marquee::after,.af-system-marquee__status i,
  .af-system-marquee__title,.af-system-marquee__trace span{animation:none!important}
}


/* =========================================================
   GALLERY // YT-STYLE FADE LAYERS
   Borrowed from the motion language of the YouTube feed:
   soft beam sweeps, card fades and ambient depth.
   ========================================================= */

/* Whole gallery panel gets a slow luminous fade beam */
#af-ig::after{
  content:"";
  position:absolute;
  z-index:1;
  top:-12%;
  bottom:-12%;
  left:-48%;
  width:34%;
  pointer-events:none;
  transform:skewX(-16deg);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,255,140,.015) 16%,
      rgba(90,255,125,.10) 48%,
      rgba(180,255,198,.055) 55%,
      rgba(0,255,140,.018) 72%,
      transparent 100%
    );
  filter:blur(1px);
  opacity:0;
  animation:afGalleryFadeSweep 8.8s ease-in-out infinite;
}

/* Soft moving bloom, slower than the beam */
#af-ig::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-18%;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 32%,rgba(75,255,110,.12),transparent 24%),
    radial-gradient(circle at 72% 68%,rgba(0,255,140,.07),transparent 28%);
  opacity:.42;
  animation:afGalleryBloom 14s ease-in-out infinite alternate;
}

/* Keep actual content above ambient effects */
#af-ig > *:not(.af-camera-rain){
  position:relative;
  z-index:3;
}
#af-ig .af-camera-rain{
  z-index:2;
}

/* Let the left info module fade subtly brighter on hover */
#af-ig .af-archive-preview__copy,
#af-ig .af-system-marquee--gallery{
  transition:
    filter .45s ease,
    box-shadow .45s ease,
    background .45s ease,
    transform .35s ease;
}
#af-ig:hover .af-archive-preview__copy{
  filter:brightness(1.045);
  box-shadow:
    inset 0 0 0 1px rgba(93,255,119,.22),
    inset 0 0 42px rgba(0,255,100,.04),
    0 0 26px rgba(53,255,95,.035);
}

/* Photo gets the same soft fade-up feel as YT cards */
#af-ig .af-archive-preview__visual img{
  transition:
    transform .65s cubic-bezier(.2,.8,.2,1),
    filter .55s ease,
    opacity .55s ease;
  opacity:.93;
}
#af-ig:hover .af-archive-preview__visual img{
  opacity:1;
  filter:brightness(1.045) contrast(1.025) saturate(1.02);
}

/* The circular/lens particles fade in/out individually rather than simply falling */
.af-camera-rain span{
  animation-name:afCircleFall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  filter:drop-shadow(0 0 7px rgba(78,255,108,.32));
}
@keyframes afCircleFall{
  0%{
    transform:translate3d(0,-50px,0) scale(.72);
    opacity:0;
  }
  8%{opacity:.18}
  22%{
    opacity:.72;
    transform:translate3d(3px,130px,0) scale(1);
  }
  48%{opacity:.30}
  70%{
    opacity:.62;
    transform:translate3d(-4px,470px,0) scale(.86);
  }
  88%{opacity:.16}
  100%{
    transform:translate3d(9px,760px,0) scale(.68);
    opacity:0;
  }
}

@keyframes afGalleryFadeSweep{
  0%,56%{
    left:-48%;
    opacity:0;
  }
  62%{opacity:.22}
  76%{
    left:116%;
    opacity:.42;
  }
  83%,100%{
    left:130%;
    opacity:0;
  }
}

@keyframes afGalleryBloom{
  0%{
    transform:translate3d(-1.5%,0,0) scale(1);
    opacity:.28;
  }
  50%{
    transform:translate3d(1.2%,-1%,0) scale(1.025);
    opacity:.46;
  }
  100%{
    transform:translate3d(0,1.4%,0) scale(1.01);
    opacity:.34;
  }
}

/* Slight card-like wake-up on hover, analogous to YT hover energy */
#af-ig .af-archive-preview__visual,
#af-ig .af-archive-preview__copy{
  transition:
    transform .25s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    filter .35s ease;
}
#af-ig .af-archive-preview__visual:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    0 0 0 1px rgba(124,255,134,.10) inset,
    0 0 24px rgba(0,255,110,.055);
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  #af-ig::before,
  #af-ig::after,
  .af-camera-rain span{
    animation:none!important;
  }
}


/* =========================================================
   SKYCAM // FINAL COMPOSITION FIX
   Compact three-column layout + protected camera/spec zones.
   ========================================================= */

/* Remove excess vertical stretching in the Skycam subsystem */
#af-skycam,
.af-skycam-section{
  min-height:0 !important;
  height:auto !important;
}

/* Any grid used by the Skycam content should align to content, not stretch to tallest arbitrary track */
#af-skycam .af-skycam-grid,
#af-skycam .af-system-grid,
.af-skycam-section .af-skycam-grid,
.af-skycam-section .af-system-grid{
  align-items:start !important;
  grid-auto-rows:auto !important;
}

/* Telemetry: content-sized, with the connection note using the former dead space */
#af-skycam .af-telemetry,
#af-skycam [class*="telemetry"],
.af-skycam-section .af-telemetry,
.af-skycam-section [class*="telemetry"]{
  min-height:0 !important;
  height:auto !important;
}

.af-connection-note{
  position:relative;
  margin-top:18px;
  padding:15px 16px 13px;
  border:1px solid rgba(78,255,108,.18);
  background:
    linear-gradient(135deg,rgba(31,255,92,.055),transparent 46%),
    rgba(0,18,11,.52);
  box-shadow:
    inset 2px 0 0 rgba(83,255,112,.52),
    inset 0 1px 0 rgba(120,255,145,.06);
  overflow:hidden;
}

.af-connection-note::after{
  content:"";
  position:absolute;
  left:-30%;
  top:0;
  width:24%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(105,255,132,.9),transparent);
  animation:afConnectionTrace 6.8s ease-in-out infinite;
}

.af-connection-note__head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:rgba(135,255,155,.88);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
}

.af-connection-note .af-status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#63ff7d;
  box-shadow:0 0 8px rgba(85,255,112,.8);
  flex:0 0 auto;
}

.af-connection-note p{
  margin:0;
  max-width:62ch;
  color:rgba(214,241,220,.78);
  font-size:12px;
  line-height:1.55;
}

.af-connection-note__meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin-top:11px;
  padding-top:9px;
  border-top:1px solid rgba(77,255,105,.11);
  color:rgba(104,207,123,.58);
  font-size:8px;
  letter-spacing:.11em;
}

@keyframes afConnectionTrace{
  0%,58%{left:-30%;opacity:0}
  64%{opacity:.8}
  80%{left:110%;opacity:.55}
  86%,100%{left:120%;opacity:0}
}

/* Hardware card: reserve a real camera zone so the image can NEVER sit on top of the specs */
#af-skycam .af-hardware-card,
#af-skycam [class*="hardware"],
.af-skycam-section .af-hardware-card,
.af-skycam-section [class*="hardware"]{
  min-height:0 !important;
}

/* Common camera/spec structures: explicit two-column separation */
#af-skycam .af-hardware-card,
.af-skycam-section .af-hardware-card{
  display:grid !important;
  grid-template-columns:minmax(118px,38%) minmax(0,62%) !important;
  align-items:center !important;
  column-gap:14px !important;
}

/* Camera/image stays in its own lane; hover may animate but never reflow/overlap */
#af-skycam .af-hardware-card img,
#af-skycam [class*="hardware"] img,
.af-skycam-section .af-hardware-card img,
.af-skycam-section [class*="hardware"] img{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  z-index:1 !important;
  display:block;
  max-width:100% !important;
  height:auto !important;
  transform:none;
  object-fit:contain;
}

/* Specs/text always above decorative layers and isolated from camera */
#af-skycam .af-hardware-card > :not(img),
#af-skycam [class*="hardware"] > :not(img),
.af-skycam-section .af-hardware-card > :not(img),
.af-skycam-section [class*="hardware"] > :not(img){
  position:relative;
  z-index:3;
  min-width:0;
}

/* Keep hover cosmetic only */
#af-skycam .af-hardware-card:hover img,
#af-skycam [class*="hardware"]:hover img,
.af-skycam-section .af-hardware-card:hover img,
.af-skycam-section [class*="hardware"]:hover img{
  transform:scale(1.025) !important;
  filter:drop-shadow(0 0 12px rgba(80,255,112,.18));
}

/* Trim oversized padding/margins that created the large empty lower field */
#af-skycam .af-skycam-grid > *,
#af-skycam .af-system-grid > *,
.af-skycam-section .af-skycam-grid > *,
.af-skycam-section .af-system-grid > *{
  margin-bottom:0 !important;
}

/* On narrower screens, stack safely instead of allowing overlap */
@media(max-width:900px){
  #af-skycam .af-hardware-card,
  .af-skycam-section .af-hardware-card{
    grid-template-columns:1fr !important;
  }
  #af-skycam .af-hardware-card img,
  .af-skycam-section .af-hardware-card img{
    max-width:180px !important;
    margin:0 auto 12px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .af-connection-note::after{animation:none!important}
}


/* =========================================================
   SKYCAM CAMERA ORIENTATION FIX
   The legacy .af-camcard image was rotated -90deg.
   Hover replaced that transform, making it look correct only on hover.
   Keep the correct (hover) orientation permanently.
   ========================================================= */
#af-ig .af-skycam__hardware .af-camcard__img img{
  transform:translateY(-3px) scale(1.025) !important;
}

#af-ig .af-skycam__hardware:hover .af-camcard__img img{
  transform:translateY(-3px) scale(1.025) !important;
}


/* =========================================================
   PHOTO GALLERY // VISIBLE LENS-RAIN MATRIX
   Dedicated layer: circles/lenses falling and fading behind content.
   ========================================================= */
#af-ig{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
#af-ig .af-gallery-rain{
  position:absolute;
  z-index:1;
  inset:42px 0 0;
  overflow:hidden;
  pointer-events:none;
  opacity:1;
  mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%);
}
#af-ig .af-gallery-rain span{
  position:absolute;
  top:-60px;
  color:rgba(87,255,115,.58);
  font-family:monospace;
  font-size:clamp(12px,1.15vw,19px);
  text-shadow:
    0 0 5px rgba(75,255,105,.55),
    0 0 14px rgba(45,255,91,.22);
  opacity:0;
  animation:afGalleryLensRain 10s linear infinite;
}
#af-ig .af-gallery-rain span:nth-child(1){left:4%;animation-delay:-1s;animation-duration:9.4s}
#af-ig .af-gallery-rain span:nth-child(2){left:9%;animation-delay:-6.2s;animation-duration:12.1s}
#af-ig .af-gallery-rain span:nth-child(3){left:15%;animation-delay:-3.4s;animation-duration:10.8s}
#af-ig .af-gallery-rain span:nth-child(4){left:21%;animation-delay:-8.3s;animation-duration:13.2s}
#af-ig .af-gallery-rain span:nth-child(5){left:27%;animation-delay:-4.7s;animation-duration:9.8s}
#af-ig .af-gallery-rain span:nth-child(6){left:33%;animation-delay:-10.1s;animation-duration:14.1s}
#af-ig .af-gallery-rain span:nth-child(7){left:39%;animation-delay:-2.2s;animation-duration:11.4s}
#af-ig .af-gallery-rain span:nth-child(8){left:45%;animation-delay:-7.5s;animation-duration:12.8s}
#af-ig .af-gallery-rain span:nth-child(9){left:51%;animation-delay:-5.1s;animation-duration:9.9s}
#af-ig .af-gallery-rain span:nth-child(10){left:57%;animation-delay:-11.2s;animation-duration:14.6s}
#af-ig .af-gallery-rain span:nth-child(11){left:63%;animation-delay:-3.1s;animation-duration:10.5s}
#af-ig .af-gallery-rain span:nth-child(12){left:68%;animation-delay:-8.8s;animation-duration:13.5s}
#af-ig .af-gallery-rain span:nth-child(13){left:73%;animation-delay:-1.8s;animation-duration:11.8s}
#af-ig .af-gallery-rain span:nth-child(14){left:78%;animation-delay:-6.9s;animation-duration:10.2s}
#af-ig .af-gallery-rain span:nth-child(15){left:83%;animation-delay:-4.2s;animation-duration:13.9s}
#af-ig .af-gallery-rain span:nth-child(16){left:88%;animation-delay:-9.6s;animation-duration:11.1s}
#af-ig .af-gallery-rain span:nth-child(17){left:93%;animation-delay:-2.8s;animation-duration:12.5s}
#af-ig .af-gallery-rain span:nth-child(18){left:97%;animation-delay:-7.7s;animation-duration:14.3s}
#af-ig .af-gallery-rain span:nth-child(n+19){display:none}

@keyframes afGalleryLensRain{
  0%{transform:translate3d(0,-70px,0) scale(.65);opacity:0}
  8%{opacity:.12}
  18%{opacity:.62}
  35%{transform:translate3d(5px,190px,0) scale(1);opacity:.32}
  52%{opacity:.70}
  70%{transform:translate3d(-6px,420px,0) scale(.82);opacity:.24}
  86%{opacity:.52}
  100%{transform:translate3d(8px,720px,0) scale(.68);opacity:0}
}

/* Content stays cleanly above the matrix */
#af-ig > *:not(.af-gallery-rain){
  position:relative;
  z-index:3;
}

@media(prefers-reduced-motion:reduce){
  #af-ig .af-gallery-rain span{animation:none!important;opacity:.12}
}


/* =========================================================
   SKYCAM // PARKING LOT REMOVAL + ACTIVE STATUS RAIL
   ========================================================= */

/* Kill the redundant loose LIVE FEED / SKYCAM / VISUAL SUBSYSTEM ONLINE intro.
   The actual billboard below already communicates this much better. */
#af-ig .af-skycam__intro,
#af-ig .af-skycam-intro,
#af-skycam .af-skycam__intro,
#af-skycam .af-skycam-intro{
  display:none!important;
}

/* Compact status rail occupies the former dead zone as an intentional HUD line,
   without creating another tall content row. */
.af-skycam-statusrail{
  position:relative;
  z-index:4;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:30px;
  margin:8px 0 12px;
  padding:0 12px;
  overflow:hidden;
  border-top:1px solid rgba(91,255,118,.12);
  border-bottom:1px solid rgba(91,255,118,.12);
  background:
    linear-gradient(90deg,rgba(41,255,87,.055),rgba(0,18,10,.12) 40%,transparent 78%);
  color:rgba(129,224,145,.58);
  font-size:8px;
  letter-spacing:.16em;
  white-space:nowrap;
}
.af-skycam-statusrail::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:-18%;
  width:16%;
  background:linear-gradient(90deg,transparent,rgba(95,255,124,.11),transparent);
  transform:skewX(-18deg);
  animation:afSkyRailSweep 7.5s ease-in-out infinite;
}
.af-skycam-statusrail__pulse{
  width:6px;height:6px;
  border-radius:50%;
  flex:0 0 auto;
  background:#65ff7e;
  box-shadow:0 0 8px rgba(90,255,116,.85);
  animation:afSkyPulse 2.2s ease-in-out infinite;
}
.af-skycam-statusrail__sep{opacity:.28}
.af-skycam-statusrail__signal{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  height:10px;
  margin-left:3px;
}
.af-skycam-statusrail__signal i{
  display:block;
  width:2px;
  background:rgba(102,255,127,.72);
  box-shadow:0 0 4px rgba(80,255,110,.28);
}
.af-skycam-statusrail__signal i:nth-child(1){height:3px}
.af-skycam-statusrail__signal i:nth-child(2){height:5px}
.af-skycam-statusrail__signal i:nth-child(3){height:7px}
.af-skycam-statusrail__signal i:nth-child(4){height:10px;animation:afSignalBlink 2.8s steps(1) infinite}
.af-skycam-statusrail__clock{
  margin-left:auto;
  color:rgba(108,205,126,.40);
}

/* Pull the actual 3-column composition upward and eliminate inherited top min-heights/gaps */
#af-ig .af-skycam__grid,
#af-ig .af-skycam-grid,
#af-skycam .af-skycam__grid,
#af-skycam .af-skycam-grid{
  margin-top:0!important;
  padding-top:0!important;
  row-gap:12px!important;
  align-items:start!important;
}
#af-ig .af-skycam,
#af-skycam{
  padding-top:14px!important;
}

/* If the old loose intro has no class, collapse common heading wrapper directly before grid */
#af-ig .af-skycam__heading,
#af-skycam .af-skycam__heading{
  display:none!important;
}

@keyframes afSkyRailSweep{
  0%,58%{left:-18%;opacity:0}
  64%{opacity:1}
  82%{left:108%;opacity:.7}
  88%,100%{left:116%;opacity:0}
}
@keyframes afSkyPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes afSignalBlink{0%,76%,100%{opacity:1}77%,84%{opacity:.18}}

@media(max-width:700px){
  .af-skycam-statusrail__clock{display:none}
  .af-skycam-statusrail{font-size:7px;gap:7px}
}
@media(prefers-reduced-motion:reduce){
  .af-skycam-statusrail::after,
  .af-skycam-statusrail__pulse,
  .af-skycam-statusrail__signal i{animation:none!important}
}


/* =========================================================
   FINAL UNIFIED PASS — GALLERY OPTICAL NODES + COMPACT SKYCAM
   Camera/hardware geometry intentionally untouched.
   ========================================================= */

.af-gallery-optics{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.72;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.af-gallery-optics + *,
.af-gallery-optics ~ *{
  position:relative;
  z-index:1;
}
.af-gallery-optics .af-optic{
  position:absolute;
  display:block;
  width:10px;
  height:10px;
  border:1px solid rgba(75,255,106,.18);
  border-radius:50%;
  box-shadow:
    0 0 0 4px rgba(61,255,95,.025),
    0 0 12px rgba(58,255,91,.08),
    inset 0 0 7px rgba(82,255,112,.055);
  opacity:0;
  animation:afGalleryOpticDrift 13s ease-in-out infinite;
}
.af-gallery-optics .af-optic::before{
  content:"";
  position:absolute;
  inset:2px;
  border:1px solid rgba(91,255,119,.11);
  border-radius:50%;
}
.af-gallery-optics .af-optic::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
  border-radius:50%;
  background:rgba(103,255,128,.5);
  box-shadow:0 0 7px rgba(80,255,111,.65);
  transform:translate(-50%,-50%);
}
.af-gallery-optics .af-optic--1{left:12%;top:24%;animation-delay:-2s;animation-duration:15s}
.af-gallery-optics .af-optic--2{left:34%;top:72%;width:14px;height:14px;animation-delay:-8s;animation-duration:18s}
.af-gallery-optics .af-optic--3{left:61%;top:18%;width:8px;height:8px;animation-delay:-5s;animation-duration:12s}
.af-gallery-optics .af-optic--4{left:78%;top:62%;width:16px;height:16px;animation-delay:-11s;animation-duration:20s}
.af-gallery-optics .af-optic--5{left:90%;top:31%;width:7px;height:7px;animation-delay:-4s;animation-duration:14s}
.af-gallery-optics .af-optic--6{left:49%;top:48%;width:11px;height:11px;animation-delay:-14s;animation-duration:19s}

@keyframes afGalleryOpticDrift{
  0%   {transform:translate3d(0,18px,0) scale(.72);opacity:0}
  12%  {opacity:.18}
  38%  {transform:translate3d(13px,-7px,0) scale(1);opacity:.52}
  58%  {opacity:.14}
  76%  {transform:translate3d(-8px,-27px,0) scale(1.22);opacity:.42}
  100% {transform:translate3d(5px,-48px,0) scale(.82);opacity:0}
}

/* The status rail remains, but the redundant loose Skycam intro consumes no row. */
#af-ig .af-skycam__intro,
#af-ig .af-skycam-intro,
#af-ig .af-skycam__heading,
#af-skycam .af-skycam__intro,
#af-skycam .af-skycam-intro,
#af-skycam .af-skycam__heading{
  display:none!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
}

/* Tighten only vertical flow above the existing Skycam grid.
   No selectors here target the camera image or hardware card. */
.af-skycam-statusrail{
  margin:6px 0 8px!important;
  min-height:28px!important;
}
#af-ig .af-skycam__grid,
#af-ig .af-skycam-grid,
#af-skycam .af-skycam__grid,
#af-skycam .af-skycam-grid{
  margin-top:0!important;
  padding-top:0!important;
}

@media(prefers-reduced-motion:reduce){
  .af-gallery-optics .af-optic{animation:none!important;opacity:.18}
}