/* =========================================================
   HafizPress 1.3 Motion & Editorial layer
   Loaded after style.css. Uses the theme's existing color/font tokens,
   so Theme Options, presets and dark mode keep working.

   1. Tokens
   2. Scroll reveals
   3. Header
   4. Motion hero
   5. Section headings
   6. Post cards
   7. Topic filter
   8. Spotlight
   9. Trending ticker
   10. Newsletter
   11. Single post: progress, share rail, TOC rail, newsletter
   12. Buttons
   13. Reduced motion / no-JS safety
   ========================================================= */

/* 1. Tokens */
:root{
  --hp-ease-out:cubic-bezier(.16,1,.3,1);
  --hp-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --hp-reveal-distance:28px;
  --hp-reveal-duration:.8s;
  --hp-glass:rgba(255,255,255,.72);
  --hp-glass-border:rgba(255,255,255,.6);
  --hp-hairline:color-mix(in srgb,var(--color-text) 10%,transparent);
  --hp-primary-soft:color-mix(in srgb,var(--color-primary) 10%,transparent);
  --hp-accent-soft:color-mix(in srgb,var(--color-accent) 16%,transparent);
}
html.dark-mode{
  /* Admin header/TOC colors are usually light; follow the reader's dark mode instead. */
  --header-bg:color-mix(in srgb,var(--color-surface) 94%,transparent);
  --header-text:var(--color-text);
  --toc-bg:var(--color-surface);
  --toc-border:var(--color-border);
  --hp-glass:rgba(27,30,43,.72);
  --hp-glass-border:rgba(255,255,255,.08);
  --hp-primary-soft:color-mix(in srgb,var(--color-primary) 22%,transparent);
}
.hp-motion-level-expressive{--hp-reveal-distance:44px;--hp-reveal-duration:1s;}

/* 2. Scroll reveals (attributes are added by motion.js, so no-JS visitors see everything) */
.hp-motion-on [data-hp-reveal]{
  opacity:0;
  transition:opacity var(--hp-reveal-duration) var(--hp-ease-out),transform var(--hp-reveal-duration) var(--hp-ease-out);
  transition-delay:var(--hp-delay,0ms);
  will-change:opacity,transform;
}
.hp-motion-on [data-hp-reveal="up"]{transform:translate3d(0,var(--hp-reveal-distance),0);}
.hp-motion-on [data-hp-reveal="fade"]{transform:translate3d(0,10px,0);}
.hp-motion-on [data-hp-reveal].is-revealed{opacity:1;transform:none;will-change:auto;}

/* 3. Header: soft glass when scrolled, hides on scroll down (smart header) */
.site-header{transition:transform .45s var(--hp-ease-out),box-shadow .3s ease,background-color .3s ease,padding .3s ease;}
.site-header.hp-scrolled{box-shadow:0 10px 30px -18px rgba(15,23,42,.35);}
.hp-smart-header .site-header.hp-header-hidden{transform:translate3d(0,-115%,0);}
.site-header .primary-menu > li > a{position:relative;}
.hp-motion-layer .site-header .primary-menu > li > a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;
  background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--hp-ease-out);
}
.hp-motion-layer .site-header .primary-menu > li > a:hover::after,
.hp-motion-layer .site-header .primary-menu > li.current-menu-item > a::after{transform:scaleX(1);}

/* 4. Motion hero (overrides the generic .site-hero styles from style.css) */
.site-hero.hp-hero-motion{color:var(--color-text);}
.site-hero.hp-hero-motion h1{color:var(--color-text);margin-bottom:18px;}
.site-hero.hp-hero-motion p{color:var(--color-text-muted);max-width:none;}
.site-hero.hp-hero-motion .container.hp-hero-inner{display:grid;flex-wrap:nowrap;gap:clamp(32px,5vw,72px);}
.site-hero.hp-hero-motion{
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;
  min-height:var(--hp-hero-min,520px);padding:clamp(56px,8vw,104px) 0 clamp(64px,8vw,112px);
  background:radial-gradient(1200px 600px at 85% -10%,var(--hp-primary-soft),transparent 60%),var(--color-bg);
}
.hp-hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.hp-orb{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;
  transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .9s var(--hp-ease-out);
}
.hp-orb-1{width:420px;height:420px;top:-120px;right:6%;background:color-mix(in srgb,var(--color-primary) 55%,transparent);}
.hp-orb-2{width:320px;height:320px;bottom:-140px;left:-60px;background:color-mix(in srgb,var(--color-accent) 45%,transparent);}
.hp-orb-3{width:220px;height:220px;top:38%;left:46%;background:color-mix(in srgb,var(--color-accent) 25%,var(--color-primary) 25%);opacity:.35;}
.hp-motion-on .hp-orb-1{animation:hp-drift 18s ease-in-out infinite alternate;}
.hp-motion-on .hp-orb-2{animation:hp-drift 22s ease-in-out infinite alternate-reverse;}
.hp-motion-on .hp-orb-3{animation:hp-drift 14s ease-in-out infinite alternate;}
@keyframes hp-drift{0%{translate:0 0;scale:1}50%{translate:40px -30px;scale:1.08}100%{translate:-30px 20px;scale:.95}}
.hp-hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--hp-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hp-hairline) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 20%,transparent 75%);
}
.hp-hero-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center;width:100%;}
.hp-hero-badge{
  display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;
  background:var(--hp-glass);border:1px solid var(--hp-hairline);backdrop-filter:blur(8px);
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:22px;
}
.hp-pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--color-accent);}
.hp-motion-on .hp-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--color-accent);animation:hp-ping 2s var(--hp-ease-out) infinite;}
@keyframes hp-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.hp-hero-title{
  font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 18px;max-width:15ch;
  text-wrap:balance;
}
.hp-hero-rotator-line{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--color-text-muted);margin:0 0 14px;font-weight:500;}
.hp-rotator{display:inline-block;position:relative;vertical-align:bottom;text-align:left;}
.hp-rotator-word{
  display:inline-block;font-weight:800;font-size:1.08em;font-family:var(--font-heading);
  background:linear-gradient(100deg,var(--color-primary),var(--color-accent));-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:transform .32s var(--hp-ease-out),opacity .32s ease,filter .32s ease;
}
.hp-rotator-word.is-out{transform:translateY(-60%);opacity:0;filter:blur(4px);}
.hp-rotator-word.is-in{animation:hp-word-in .45s var(--hp-ease-out);}
@keyframes hp-word-in{from{transform:translateY(60%);opacity:0;filter:blur(4px)}to{transform:none;opacity:1;filter:none}}
html.dark-mode .hp-rotator-word{background-image:linear-gradient(100deg,var(--color-link),var(--color-accent));}
.hp-hero-subtitle{font-size:clamp(1rem,1.3vw,1.12rem);color:var(--color-text-muted);max-width:56ch;margin:0 0 30px;}
.hp-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px;}
.hp-hero-stats{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;}
.hp-hero-stats > div{padding:0 28px;border-left:1px solid var(--color-border);}
.hp-hero-stats > div:first-child{padding-left:0;border-left:0;}
.hp-hero-stats dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);font-weight:700;order:2;}
.hp-hero-stats dd{margin:0 0 2px;font-family:var(--font-heading);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;color:var(--color-text);line-height:1.1;}
.hp-hero-stats > div{display:flex;flex-direction:column-reverse;}

/* Hero visual */
.hp-hero-visual{position:relative;display:flex;justify-content:center;}
.hp-hero-frame{
  position:relative;width:min(100%,440px);aspect-ratio:1;
  transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .9s var(--hp-ease-out);
}
.hp-hero-ring{position:absolute;inset:-6%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--color-primary) 35%,transparent);}
.hp-hero-ring-2{inset:-16%;border-style:solid;border-color:var(--hp-hairline);}
.hp-motion-on .hp-hero-ring-1{animation:hp-spin 40s linear infinite;}
.hp-motion-on .hp-hero-ring-2{animation:hp-spin 70s linear infinite reverse;}
@keyframes hp-spin{to{transform:rotate(360deg)}}
.hp-hero-photo,.hp-hero-monogram{
  position:absolute;inset:6%;border-radius:32% 68% 58% 42% / 42% 38% 62% 58%;overflow:hidden;
  box-shadow:0 40px 80px -30px color-mix(in srgb,var(--color-primary) 55%,transparent);
}
.hp-motion-on .hp-hero-photo,.hp-motion-on .hp-hero-monogram{animation:hp-blob 14s ease-in-out infinite alternate;}
@keyframes hp-blob{
  0%{border-radius:32% 68% 58% 42% / 42% 38% 62% 58%}
  50%{border-radius:58% 42% 36% 64% / 56% 62% 38% 44%}
  100%{border-radius:44% 56% 66% 34% / 36% 52% 48% 64%}
}
.hp-hero-photo img{width:100%;height:100%;object-fit:cover;}
.hp-hero-monogram{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark) 55%,color-mix(in srgb,var(--color-accent) 70%,var(--color-primary-dark)));
}
.hp-hero-monogram span{font-family:var(--font-heading);font-weight:800;font-size:clamp(4rem,9vw,7.5rem);letter-spacing:-.04em;color:#fff;opacity:.95;}
.hp-hero-chip{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:9px 16px;border-radius:999px;
  background:var(--hp-glass);border:1px solid var(--hp-glass-border);backdrop-filter:blur(12px);
  color:var(--color-text);font-weight:700;font-size:.86rem;box-shadow:0 14px 34px -16px rgba(15,23,42,.35);
  transition:transform .3s var(--hp-ease-spring),color .2s ease;
}
.hp-hero-chip span{color:var(--color-accent);font-weight:800;}
.hp-hero-chip:hover{color:var(--color-primary);transform:translateY(-3px) scale(1.04);}
.hp-hero-chip-1{top:8%;left:-6%;}
.hp-hero-chip-2{top:34%;right:-10%;}
.hp-hero-chip-3{bottom:24%;left:-12%;}
.hp-motion-on .hp-hero-chip-1{animation:hp-float 6s ease-in-out infinite;}
.hp-motion-on .hp-hero-chip-2{animation:hp-float 7s ease-in-out .8s infinite;}
.hp-motion-on .hp-hero-chip-3{animation:hp-float 6.5s ease-in-out 1.6s infinite;}
@keyframes hp-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.hp-hero-latest{
  position:absolute;z-index:2;right:-4%;bottom:-2%;width:min(78%,300px);display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;
  padding:14px 16px;border-radius:16px;background:var(--hp-glass);border:1px solid var(--hp-glass-border);backdrop-filter:blur(14px);
  box-shadow:0 24px 50px -24px rgba(15,23,42,.45);color:var(--color-text);transition:transform .35s var(--hp-ease-out);
}
.hp-hero-latest small{grid-column:1;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--color-accent);}
.hp-hero-latest strong{grid-column:1;font-size:.92rem;line-height:1.35;font-family:var(--font-heading);}
.hp-hero-latest > span{grid-column:2;grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:#fff;transition:transform .35s var(--hp-ease-spring);}
.hp-hero-latest:hover{transform:translateY(-4px);color:var(--color-text);}
.hp-hero-latest:hover > span{transform:translateX(3px) rotate(-12deg);}
.hp-scroll-cue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border:2px solid var(--color-border);border-radius:14px;}
.hp-scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--color-accent);}
.hp-motion-on .hp-scroll-cue span{animation:hp-scroll 1.8s ease-in-out infinite;}
@keyframes hp-scroll{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* Hero entrance (CSS only). The H1 moves but never starts transparent, which keeps LCP fast. */
.hp-motion-on .hp-hero-in{opacity:0;animation:hp-rise .9s var(--hp-ease-out) forwards;animation-delay:calc(var(--i,0) * 90ms + 80ms);}
.hp-motion-on .hp-hero-in-move{animation:hp-rise-solid .9s var(--hp-ease-out) both;animation-delay:90ms;}
@keyframes hp-rise{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes hp-rise-solid{from{transform:translate3d(0,18px,0)}to{transform:none}}

/* 5. Section headings: accent bar grows in */
.hp-motion-layer .section-heading h2{letter-spacing:-.02em;}
.hp-motion-on .section-heading[data-hp-reveal] h2::after{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--hp-ease-out) .2s;}
.hp-motion-on .section-heading.is-revealed h2::after{transform:scaleX(1);}
.hp-motion-layer .section-heading > a{display:inline-flex;align-items:center;gap:6px;}
.hp-motion-layer .section-heading > a:hover{gap:10px;}

/* 6. Post cards */
.hp-motion-layer .post-card{
  position:relative;
  transition:transform .5s var(--hp-ease-out),box-shadow .5s var(--hp-ease-out),border-color .3s ease;
}
.hp-motion-layer .post-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px color-mix(in srgb,var(--color-primary) 55%,transparent);border-color:color-mix(in srgb,var(--color-primary) 24%,var(--color-border));}
.hp-motion-layer .post-card-thumb img{transition:transform .9s var(--hp-ease-out),opacity .6s ease,filter .6s ease;}
.hp-motion-layer .post-card:hover .post-card-thumb img{transform:scale(1.07);}
.hp-motion-layer .post-card-thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform 1s var(--hp-ease-out);
}
.hp-motion-layer .post-card:hover .post-card-thumb::after{transform:translateX(120%);}
.hp-motion-layer .post-card-title a{
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-size:0% 2px;background-position:0 100%;transition:background-size .5s var(--hp-ease-out),color .2s ease;
}
.hp-motion-layer .post-card:hover .post-card-title a{background-size:100% 2px;}
/* Pointer glow */
.post-card.hp-glow::before,.hp-spotlight-lead.hp-glow::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--color-accent) 16%,transparent),transparent 45%);
}
.post-card.hp-glow:hover::before,.hp-spotlight-lead.hp-glow:hover::before{opacity:1;}
/* 3D tilt (expressive) */
.post-card.hp-tilt{transform-style:preserve-3d;}
.post-card.hp-tilt:hover{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px);transition:transform .15s linear,box-shadow .5s var(--hp-ease-out);}
.hp-img-pending{opacity:0;filter:blur(6px);}

/* 7. Topic filter */
.hp-topic-filter{display:flex;flex-wrap:wrap;gap:10px;margin:-6px 0 30px;}
.hp-topic-chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);
  font:600 .88rem/1 var(--font-body);transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--hp-ease-spring);
}
.hp-topic-chip span{font-size:.72rem;padding:3px 7px;border-radius:999px;background:var(--color-bg-alt);color:var(--color-text-muted);}
.hp-topic-chip:hover{border-color:var(--color-primary);transform:translateY(-2px);}
.hp-topic-chip.is-active{background:var(--color-primary);border-color:var(--color-primary);color:#fff;}
.hp-topic-chip.is-active span{background:rgba(255,255,255,.18);color:#fff;}
.hp-topic-chip:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px;}
.post-grid{transition:opacity .25s ease,filter .25s ease;}
.post-grid.hp-is-filtering{opacity:.35;filter:blur(2px);pointer-events:none;}
.hp-filter-empty{grid-column:1 / -1;text-align:center;color:var(--color-text-muted);padding:40px 0;}

/* 8. Spotlight featured layout */
.hp-spotlight-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:stretch;}
.hp-spotlight-lead{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);}
.hp-spotlight-media{display:block;aspect-ratio:16/9;overflow:hidden;}
.hp-spotlight-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--hp-ease-out);}
.hp-spotlight-lead:hover .hp-spotlight-media img{transform:scale(1.05);}
.hp-spotlight-body{position:relative;z-index:2;padding:26px 28px 30px;}
.hp-spotlight-body h3{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.2;letter-spacing:-.02em;margin:8px 0 10px;}
.hp-spotlight-body h3 a,.hp-spotlight-item h3 a{color:var(--color-text);}
.hp-spotlight-body h3 a:hover,.hp-spotlight-item h3 a:hover{color:var(--color-primary);}
.hp-spotlight-body p{color:var(--color-text-muted);margin:0 0 6px;}
.hp-kicker{display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);}
.hp-spotlight-list{display:flex;flex-direction:column;gap:14px;}
.hp-spotlight-item{
  flex:1;display:grid;grid-template-columns:auto 1fr 96px;gap:16px;align-items:center;padding:18px;border-radius:var(--radius-md);
  border:1px solid var(--color-border);background:var(--color-surface);transition:transform .4s var(--hp-ease-out),border-color .3s ease,box-shadow .4s ease;
}
.hp-spotlight-item:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--color-primary) 30%,var(--color-border));box-shadow:0 18px 36px -26px rgba(15,23,42,.4);}
.hp-spotlight-num{font-family:var(--font-heading);font-size:1.8rem;font-weight:800;color:color-mix(in srgb,var(--color-accent) 80%,transparent);line-height:1;}
.hp-spotlight-item h3{font-size:1.02rem;line-height:1.35;margin:4px 0;}
.hp-spotlight-item small{color:var(--color-text-muted);font-size:.78rem;}
.hp-spotlight-thumb{display:block;width:96px;aspect-ratio:1;border-radius:12px;overflow:hidden;}
.hp-spotlight-thumb img{width:100%;height:100%;object-fit:cover;}

/* 9. Trending ticker: faded edges and a calmer hover */
.hp-motion-layer .hp-trending-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.hp-motion-layer .hp-trending-item{transition:background .3s ease;}
.hp-motion-layer .hp-trending-item:hover{background:var(--color-surface);}
.hp-motion-layer .hp-trending-item:hover .hp-trending-number{color:var(--color-primary);}

/* 10. Newsletter */
.hp-motion-layer .hp-home-section-newsletter{position:relative;overflow:hidden;isolation:isolate;}
.hp-motion-layer .hp-home-section-newsletter::before,
.hp-motion-layer .hp-home-section-newsletter::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none;
}
.hp-motion-layer .hp-home-section-newsletter::before{width:420px;height:420px;right:-80px;top:-160px;background:color-mix(in srgb,var(--color-accent) 40%,transparent);}
.hp-motion-layer .hp-home-section-newsletter::after{width:360px;height:360px;left:-120px;bottom:-200px;background:color-mix(in srgb,#ffffff 14%,transparent);}
.hp-motion-on .hp-home-section-newsletter::before{animation:hp-drift 16s ease-in-out infinite alternate;}
.hp-motion-on .hp-home-section-newsletter::after{animation:hp-drift 20s ease-in-out infinite alternate-reverse;}
.hp-newsletter-embed{flex-shrink:0;min-width:min(100%,360px);}
.hp-newsletter-embed iframe{width:100%;border:0;border-radius:12px;}

/* 11. Single post */
.hp-motion-layer .reading-progress{
  height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));
  box-shadow:0 0 12px color-mix(in srgb,var(--color-accent) 60%,transparent);border-radius:0 4px 4px 0;
}
.single .content-layout > article{position:relative;}
.hp-share-rail-wrap{display:none;}
@media (min-width:1360px){
  .hp-has-share-rail .hp-share-rail-wrap{display:block;position:absolute;top:0;bottom:0;left:-84px;width:52px;}
  .hp-share-rail{position:sticky;top:120px;display:flex;flex-direction:column;align-items:center;gap:10px;}
}
.hp-share-rail-label{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:var(--color-text-muted);writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:6px;}
.hp-share-rail-btn{
  position:relative;width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);
  transition:transform .3s var(--hp-ease-spring),color .2s ease,border-color .2s ease,background .2s ease;
}
.hp-share-rail-btn svg{width:17px;height:17px;}
.hp-share-rail-btn:hover{transform:scale(1.12);color:#fff;background:var(--color-primary);border-color:var(--color-primary);}
.hp-copy-link.is-copied{color:#fff;background:#16a34a;border-color:#16a34a;}
.hp-copy-link.is-copied::after{
  content:attr(data-tip);position:absolute;left:52px;white-space:nowrap;font-size:.75rem;font-weight:700;
  padding:5px 10px;border-radius:8px;background:var(--color-text);color:var(--color-bg);
}
/* TOC rail (cloned into the sidebar by motion.js) */
.hp-toc-rail{
  position:sticky;top:110px;margin-top:28px;padding:20px 20px 16px;border-radius:var(--radius-md);
  border:1px solid var(--color-border);background:var(--color-surface);max-height:calc(100vh - 140px);overflow:auto;
}
.hp-toc-rail-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-heading);font-weight:700;font-size:1rem;margin-bottom:10px;}
.hp-toc-rail-pct{font:700 .75rem/1 var(--font-body);color:var(--color-accent);}
.hp-toc-rail-bar{height:3px;border-radius:3px;background:var(--color-bg-alt);overflow:hidden;margin-bottom:14px;}
.hp-toc-rail-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transform:scaleX(0);transform-origin:left;transition:transform .2s linear;}
.hp-toc-rail ol,.hp-toc-rail ul{list-style:none;margin:0;padding:0;}
.hp-toc-rail ol ol,.hp-toc-rail ul ul{padding-left:14px;}
.hp-toc-rail li{margin:0;}
.hp-toc-rail a{display:block;padding:6px 0 6px 12px;border-left:2px solid transparent;font-size:.88rem;line-height:1.4;color:var(--color-text-muted);transition:color .2s ease,border-color .2s ease,padding .25s var(--hp-ease-out);}
.hp-toc-rail a:hover{color:var(--color-text);}
.hp-toc-rail a.active{color:var(--color-primary);border-left-color:var(--color-accent);padding-left:16px;font-weight:600;}
html.dark-mode .hp-toc-rail a.active{color:var(--color-link);}
/* The rail sits at the end of the sidebar and sticks for the rest of the article, so the
   sidebar stretches to the article height instead of sticking as one block. */
@media (min-width:961px){
  body.hp-has-toc-rail .content-layout > .sidebar{position:static;align-self:stretch;}
}
@media (max-width:1024px){.hp-toc-rail{display:none;}}
/* Post newsletter box */
.hp-post-newsletter{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:center;
  margin:48px 0;padding:32px;border-radius:var(--radius-lg);color:#fff;
  background:radial-gradient(500px 240px at 100% 0%,color-mix(in srgb,var(--color-accent) 35%,transparent),transparent 70%),linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
}
.hp-post-newsletter h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:6px 0 8px;}
.hp-post-newsletter p{color:rgba(255,255,255,.8);margin:0;}
.hp-post-newsletter-action{display:flex;justify-content:flex-end;}
.hp-post-newsletter-action iframe{width:100%;border:0;border-radius:12px;}
@media (max-width:700px){.hp-post-newsletter{grid-template-columns:1fr;padding:26px 22px}.hp-post-newsletter-action{justify-content:flex-start}}

/* 12. Buttons */
.hp-btn-shine{position:relative;overflow:hidden;isolation:isolate;}
.hp-btn-shine::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.45) 50%,transparent 75%);transform:translateX(-120%);
}
.hp-motion-layer .hp-btn-shine:hover::before{transition:transform .8s var(--hp-ease-out);transform:translateX(120%);}
.hp-btn-arrow{display:inline-block;margin-left:8px;transition:transform .3s var(--hp-ease-spring);}
.btn:hover .hp-btn-arrow{transform:translateX(4px);}
.hp-btn-ghost{background:transparent;border:1px solid var(--color-border);color:var(--color-text);}
.hp-btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--hp-primary-soft);}
.hp-magnetic{transition:transform .35s var(--hp-ease-out),background .25s ease,color .25s ease,border-color .25s ease;}
.hp-motion-layer .back-to-top:hover{transform:translateY(-4px) scale(1.05);}

/* Responsive */
@media (max-width:1024px){
  .hp-hero-inner{grid-template-columns:1fr;}
  .hp-hero-visual{max-width:380px;margin:8px auto 0;}
  .hp-hero-frame{width:min(72vw,340px);}
  .hp-hero-title{max-width:none;}
  .hp-spotlight-grid{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .hp-hero-motion{padding:44px 0 72px;min-height:0;}
  .hp-hero-chip{font-size:.76rem;padding:7px 12px;}
  .hp-hero-chip-1{left:-2%;}.hp-hero-chip-2{right:-4%;}.hp-hero-chip-3{left:-4%;}
  .hp-hero-latest{display:none;}
  .hp-hero-frame{width:min(70vw,280px);}
  .hp-hero-stats > div{padding:0 18px;}
  .hp-topic-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-24px;padding-right:24px;-webkit-overflow-scrolling:touch;}
  .hp-topic-filter::-webkit-scrollbar{display:none;}
  .hp-topic-chip{flex-shrink:0;}
  .hp-spotlight-item{grid-template-columns:auto 1fr;}
  .hp-spotlight-thumb{display:none;}
  .hp-scroll-cue{display:none;}
}

/* 13. Reduced motion / safety */
@media (prefers-reduced-motion: reduce){
  .hp-hero-in,.hp-hero-in-move{opacity:1!important;animation:none!important;transform:none!important;}
}
html:not(.hp-motion-on) .hp-hero-in{opacity:1;}
html:not(.hp-motion-on) [data-hp-reveal]{opacity:1!important;transform:none!important;}
@media print{.hp-share-rail-wrap,.hp-toc-rail,.hp-hero-bg,.hp-scroll-cue{display:none!important;}}