/* ============================================================================
   PREMIUM 2026 — final design layer
   Depth, glass, motion, article media, admin polish, safety fallbacks.
   Loaded last on every page so it wins the cascade.
   ========================================================================== */

/* ── 0. SAFETY: content must never stay invisible ─────────────────────────
   Reveal-on-scroll elements start at opacity 0 and wait for JS. If JS is
   slow, blocked or errors out, this animation force-reveals everything. */
@keyframes pm-force-reveal { to { opacity: 1; transform: none; } }
.reveal, .reveal-left, .reveal-right,
[data-gsap-fade], [data-gsap-stagger] > * {
  animation: pm-force-reveal .8s ease 1.9s forwards;
}
.reveal.visible, .reveal-left.visible, .reveal-right.visible { animation: none; }

/* ── 1. Ambient living background ───────────────────────────────────────── */
.pm-aurora {
  position: fixed; inset: -20vmax; z-index: 0; pointer-events: none;
  filter: blur(34px) saturate(1.12);
  opacity: .5;
  will-change: transform;
  transform: translateZ(0);
}
.pm-aurora span {
  position: absolute; border-radius: 50%;
  mix-blend-mode: screen;
}
.pm-aurora .a1 { width: 55vmax; height: 55vmax; left: -8vmax;  top: -6vmax;
  background: radial-gradient(circle at 30% 30%, rgba(61,224,138,.16), transparent 62%);
  animation: pm-drift1 26s ease-in-out infinite alternate; }
.pm-aurora .a2 { width: 48vmax; height: 48vmax; right: -10vmax; top: 8vmax;
  background: radial-gradient(circle at 60% 40%, rgba(55,213,208,.13), transparent 60%);
  animation: pm-drift2 32s ease-in-out infinite alternate; }
.pm-aurora .a3 { width: 42vmax; height: 42vmax; left: 22vmax; bottom: -14vmax;
  background: radial-gradient(circle at 50% 60%, rgba(226,185,92,.10), transparent 58%);
  animation: pm-drift3 38s ease-in-out infinite alternate; }
@keyframes pm-drift1 { to { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); } }
@keyframes pm-drift2 { to { transform: translate3d(-7vmax, 9vmax, 0) scale(.94); } }
@keyframes pm-drift3 { to { transform: translate3d(6vmax, -8vmax, 0) scale(1.08); } }

#pm-particles {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .55;
}
body > header, body > main, body > footer, body > nav, body > .container { position: relative; z-index: 2; }

/* ── 2. Micro-interactions & depth ──────────────────────────────────────── */
:where(.btn, .hero2-cta-btn, .news-card, .pcard, .qa-card, .mini-resource-card) {
  transition: transform .28s cubic-bezier(.22,.9,.28,1.15), box-shadow .28s ease,
              border-color .28s ease, background-color .28s ease, filter .28s ease;
}
.btn:hover, .hero2-cta-btn:hover { transform: translateY(-2px); }
.btn:active, .hero2-cta-btn:active { transform: translateY(0) scale(.985); transition-duration: .09s; }
.btn.btn-primary:hover, .btn.btn-solid:hover, .hero2-cta-btn.primary:hover {
  box-shadow: 0 10px 32px -8px rgba(61,224,138,.5), 0 0 0 1px rgba(61,224,138,.35) inset;
}

/* card lift + edge light */
.news-card, .pcard {
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
}
.news-card:hover, .pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.65), 0 0 0 1px rgba(126,231,196,.22);
}
.news-card::after, .pcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.055) 47%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .8s ease;
}
.news-card:hover::after, .pcard:hover::after { transform: translateX(120%); }
.news-card-img img, .pcard-media img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.news-card:hover .news-card-img img, .pcard:hover .pcard-media img { transform: scale(1.06); }

/* focus visibility (accessibility) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #37d5d0 !important; outline-offset: 2px; border-radius: 6px;
}

/* refined scrollbar + selection */
::selection { background: rgba(61,224,138,.32); color: #eafff5; }
* { scrollbar-width: thin; scrollbar-color: rgba(61,224,138,.35) rgba(10,20,16,.4); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(8,16,13,.6); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(61,224,138,.4), rgba(55,213,208,.35)); border-radius: 8px; border: 2px solid rgba(8,16,13,.7); }

/* ── 3. News: titles, links, gallery, video, attachments, lightbox ──────── */
.news-card-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; line-height: 1.3;
}
.news-card-lede { overflow-wrap: anywhere; }
.article-title {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.35rem, 3.4vw, 2.55rem);
  line-height: 1.14; color: var(--cc-text);
  max-width: 30ch; text-wrap: balance; overflow-wrap: anywhere;
}
.article-body { overflow-wrap: anywhere; }
.article-link {
  color: #7ee7c4; text-decoration: none; font-weight: 600;
  border-bottom: 1px solid rgba(126,231,196,.4);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  padding: 0 .12em; border-radius: 3px;
  word-break: break-all;
}
.article-link:hover { color: #b5ffe2; border-bottom-color: #7ee7c4; background: rgba(61,224,138,.08); }

.article-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin: 1.4rem 0; border-radius: 16px; overflow: hidden;
  background: #050d0a;
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(126,231,196,.14);
}
.article-video iframe, .article-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}

.article-gallery {
  display: grid; gap: .7rem; margin: 1.5rem 0;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.article-gallery-item { margin: 0; border-radius: 14px; overflow: hidden; position: relative;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.65), 0 0 0 1px rgba(126,231,196,.12); }
.article-gallery-item img {
  width: 100%; height: 160px; object-fit: cover; display: block; cursor: zoom-in;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}
.article-gallery-item:hover img { transform: scale(1.07); filter: brightness(1.08); }

.article-attachments { display: flex; flex-direction: column; gap: .55rem; }
.article-attachment {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .95rem; border-radius: 12px; text-decoration: none;
  background: rgba(16,30,24,.72); border: 1px solid rgba(126,231,196,.16);
  color: var(--cc-text); transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.article-attachment:hover { border-color: rgba(126,231,196,.45); transform: translateX(4px); background: rgba(20,38,30,.85); }
.article-attachment .ext {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .06em;
  background: linear-gradient(135deg, rgba(61,224,138,.2), rgba(55,213,208,.16));
  color: #7ee7c4; padding: .32em .55em; border-radius: 7px; flex: 0 0 auto;
}
.article-attachment .name { flex: 1 1 auto; overflow-wrap: anywhere; font-size: .88rem; }
.article-attachment .dl { color: #7ee7c4; font-weight: 700; }

#article-lightbox {
  position: fixed; inset: 0; z-index: 12000; display: flex;
  align-items: center; justify-content: center; padding: 4vmin;
  background: rgba(3,8,6,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
#article-lightbox.is-open { opacity: 1; pointer-events: auto; }
#article-lightbox img {
  max-width: 94vw; max-height: 90vh; border-radius: 14px;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(126,231,196,.2);
  transform: scale(.94); transition: transform .28s cubic-bezier(.2,.8,.25,1.2);
}
#article-lightbox.is-open img { transform: scale(1); }
#article-lightbox .lb-close {
  position: absolute; top: 18px; right: 20px; z-index: 1;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(126,231,196,.3); background: rgba(10,22,17,.8);
  color: #eafff5; font-size: 1rem; cursor: pointer;
}

/* ── 4. Upload dropzones ────────────────────────────────────────────────── */
.dropzone { transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.dropzone.is-dragover {
  border-color: #3de08a !important;
  background: rgba(61,224,138,.10) !important;
  transform: scale(1.01);
  box-shadow: 0 0 0 3px rgba(61,224,138,.18), 0 0 34px -6px rgba(61,224,138,.35);
}

/* ── 5. Admin dashboard polish ──────────────────────────────────────────── */
.kpi-card, .stat-card {
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kpi-card::before, .stat-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(61,224,138,.65), rgba(55,213,208,.5), transparent);
  opacity: .55;
}
.kpi-card:hover, .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -16px rgba(0,0,0,.6), 0 0 0 1px rgba(126,231,196,.22);
}
.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover { background: rgba(61,224,138,.05); }
.admin-nav a { transition: background .2s ease, color .2s ease, transform .2s ease; }
.admin-nav a:hover { transform: translateX(3px); }

/* toasts as glass */
.toast {
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(126,231,196,.2);
}

/* ── 6. Mobile hardening ────────────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg, canvas { max-width: 100%; }
h1, h2, h3, .hero2-title, .news-card-title, .article-title { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .article-gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .article-gallery-item img { height: 120px; }
  .article-video { border-radius: 12px; }
}

/* ── 7. Reduced motion: switch everything off ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pm-aurora, #pm-particles { display: none !important; }
  .pm-aurora span { animation: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, [data-gsap-fade], [data-gsap-stagger] > * {
    opacity: 1 !important; transform: none !important;
  }
}