/* News page: depth + animation. Loaded only by templates/pages/news.php.
   Everything that moves is wrapped in (prefers-reduced-motion:no-preference);
   the scroll-reveal class "news-motion" is only added by news-motion.js when motion is allowed. */

/* ---------- ambient glow behind the page (kills the flat look) ---------- */
.news-hero{position:relative;isolation:isolate}
.news-hero::before,
.news-hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(520px,70vw);aspect-ratio:1;border-radius:50%;
  filter:blur(90px);opacity:.30;
}
.news-hero::before{top:-40px;right:0;background:radial-gradient(circle,var(--c1),transparent 68%)}
.news-hero::after{top:360px;left:0;background:radial-gradient(circle,var(--c5),transparent 68%);opacity:.26}

/* faint pink dot grid behind the heading */
.news-hero .eyebrow{position:relative}
.news-hero .eyebrow::before{
  content:"";position:absolute;z-index:-1;left:-24px;top:-72px;width:min(900px,100%);height:340px;
  background-image:radial-gradient(rgba(var(--c1-rgb),.16) 1.4px,transparent 1.7px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 20% 30%,#000,transparent 70%);
          mask-image:radial-gradient(ellipse at 20% 30%,#000,transparent 70%);
  pointer-events:none;
}

/* heading accent bar */
.news-hero h1::after{
  content:"";display:block;height:6px;width:clamp(80px,12vw,140px);margin-top:22px;border-radius:3px;
  background:linear-gradient(90deg,var(--pink),var(--lime));
  transform-origin:left center;
}

/* ---------- cards: depth, lift, glow ---------- */
.news-hero .news-item{position:relative}
.news-hero .news-card{
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 34px -20px rgba(0,0,0,.9);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .35s ease;
}
/* thin accent bar that slides in across the top of a card */
.news-hero .news-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--lime),var(--c5));
  transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.news-hero .news-item:hover .news-card::before,
.news-hero .news-item:focus-within .news-card::before{transform:scaleX(1)}
.news-hero .news-item:hover .news-card,
.news-hero .news-item:focus-within .news-card{
  box-shadow:0 26px 50px -18px rgba(var(--c1-rgb),.6),0 0 0 1px rgba(var(--c1-rgb),.5);
}

/* thumbnail: zoom + light sweep */
.news-hero .news-thumb{position:relative}
.news-hero .news-thumb img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.news-hero .news-item:hover .news-thumb img,
.news-hero .news-item:focus-within .news-thumb img{transform:scale(1.08)}
.news-hero .news-thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-120%);
}
.news-hero .news-item:hover .news-thumb::after,
.news-hero .news-item:focus-within .news-thumb::after{transform:translateX(120%);transition:transform .9s ease}

/* "Read article ↗" arrow nudges */
.news-hero .news-more [aria-hidden]{display:inline-block;transition:transform .25s ease}
.news-hero .news-item:hover .news-more [aria-hidden],
.news-hero .news-item:focus-within .news-more [aria-hidden]{transform:translate(4px,-4px)}

/* ---------- motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* page load */
  .news-hero .eyebrow{animation:news-rise .7s cubic-bezier(.2,.7,.2,1) both}
  .news-hero h1{animation:news-rise .9s .08s cubic-bezier(.2,.7,.2,1) both}
  .news-hero h1::after{animation:news-bar 1s .55s cubic-bezier(.2,.7,.2,1) both}
  .news-hero .lead{animation:news-rise .8s .2s cubic-bezier(.2,.7,.2,1) both}

  /* drifting glow */
  .news-hero::before{animation:news-drift-a 16s ease-in-out infinite alternate}
  .news-hero::after{animation:news-drift-b 20s ease-in-out infinite alternate}

  /* placeholder thumbnails (stories without an image) */
  .news-hero .news-thumb{background-size:220% 220%;animation:news-shift 9s ease-in-out infinite alternate}
  .news-hero .news-thumb svg{animation:news-float 4.5s ease-in-out infinite}

  /* scroll reveal + pointer tilt (classes/vars set by news-motion.js) */
  .news-motion .news-hero .news-item:not(.in){opacity:0}
  .news-motion .news-hero .news-item.in{animation:news-in .85s var(--d,0ms) cubic-bezier(.2,.7,.2,1) both}
  .news-motion .news-hero .news-item{
    transform:perspective(900px) rotateX(calc(var(--rx,0) * 4deg)) rotateY(calc(var(--ry,0) * 4deg)) translateY(var(--lift,0px));
    transition:transform .3s ease;
    will-change:transform;
  }
  .news-motion .news-hero .news-item:hover,
  .news-motion .news-hero .news-item:focus-within{--lift:-8px;z-index:2}
}

@keyframes news-rise{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes news-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes news-in{from{opacity:0;translate:0 48px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes news-drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,80px) scale(1.15)}}
@keyframes news-drift-b{from{transform:translate(0,0) scale(1.1)}to{transform:translate(80px,-60px) scale(.95)}}
@keyframes news-shift{from{background-position:0% 0%}to{background-position:100% 100%}}
@keyframes news-float{0%,100%{translate:0 0}50%{translate:0 -6px}}