/* =========================================================
   HIGAN ARCHIVE - Home Page Visual Effects
   Adds animation & motion polish to the home page only:
   hero particles/glow/kenburns, scroll progress bar,
   scroll-reveal animations, shimmer text, glowing buttons,
   card hover shine, back-to-top button.
   ========================================================= */

/* ---------- Scroll progress bar (top of viewport) ---------- */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-gold-bright) 60%, #8ec4ff 100%);
  z-index: 999; transition: width .12s ease-out;
  box-shadow: 0 0 8px rgba(63,109,245,0.6);
}

/* ---------- Hero background (Ken Burns slow zoom) ---------- */
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background: #000 url('../images/hero_banner.jpg') center top / cover no-repeat;
  animation: heroKenBurns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroKenBurns{
  0%{ transform: scale(1) translate(0,0); }
  100%{ transform: scale(1.12) translate(-1%, -1%); }
}

/* ---------- Floating glow blobs behind hero text ---------- */
.hero-glow{
  position:absolute; z-index:1; border-radius:50%; filter: blur(60px);
  pointer-events:none; mix-blend-mode: screen; opacity:.55;
}
.hero-glow-1{
  width:420px; height:420px; top:-120px; left:-100px;
  background: radial-gradient(circle, rgba(94,140,255,0.55), transparent 70%);
  animation: floatBlob1 14s ease-in-out infinite;
}
.hero-glow-2{
  width:360px; height:360px; bottom:-140px; right:-80px;
  background: radial-gradient(circle, rgba(229,72,77,0.4), transparent 70%);
  animation: floatBlob2 17s ease-in-out infinite;
}
.hero-glow-3{
  width:260px; height:260px; top:40%; right:18%;
  background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%);
  animation: floatBlob3 11s ease-in-out infinite;
}
@keyframes floatBlob1{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(40px, 30px) scale(1.15); }
}
@keyframes floatBlob2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-30px, -40px) scale(1.1); }
}
@keyframes floatBlob3{
  0%,100%{ transform: translate(0,0) scale(1); opacity:.35; }
  50%{ transform: translate(-20px, 25px) scale(1.3); opacity:.6; }
}

/* ---------- Hero particles (small drifting sparks, JS-generated) ---------- */
.hero-particles{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.hero-particle{
  position:absolute; bottom:-10px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(120,160,255,0.1));
  box-shadow: 0 0 6px 1px rgba(150,180,255,0.7);
  animation-name: particleRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity:0;
}
@keyframes particleRise{
  0%{ transform: translateY(0) translateX(0) scale(0.6); opacity:0; }
  8%{ opacity:.9; }
  50%{ transform: translateY(-320px) translateX(var(--drift, 20px)) scale(1); }
  92%{ opacity:.5; }
  100%{ transform: translateY(-640px) translateX(calc(var(--drift, 20px) * 2)) scale(0.4); opacity:0; }
}

/* ---------- Shimmering gradient text (hero subtitle "HIGAN ARCHIVE") ---------- */
.shimmer-text{
  background: linear-gradient(90deg, var(--accent-gold-bright) 0%, #fff 22%, var(--accent-gold-bright) 44%, #8ec4ff 66%, var(--accent-gold-bright) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmerMove 5s linear infinite;
}
@keyframes shimmerMove{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* ---------- Hero content entrance animation ---------- */
.hero-eyebrow{ animation: fadeUpIn .8s ease .1s both; }
.hero-title{ animation: fadeUpIn .9s ease .25s both; }
.hero-desc{ animation: fadeUpIn .9s ease .4s both; }
.hero-actions{ animation: fadeUpIn .9s ease .55s both; }
@keyframes fadeUpIn{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- Glowing pulse on primary hero CTA ---------- */
.btn-glow{ position:relative; }
.btn-glow::after{
  content:''; position:absolute; inset:-2px; z-index:-1;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-bright), var(--accent-gold));
  filter: blur(10px); opacity:.65;
  animation: pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ opacity:.4; transform: scale(1); }
  50%{ opacity:.75; transform: scale(1.05); }
}

/* ---------- Scroll-down indicator at hero bottom ---------- */
.scroll-indicator{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
  color: var(--text-on-dark-faint); font-size:11px; letter-spacing:2px;
  animation: fadeUpIn 1s ease .8s both;
}
.scroll-indicator-dot{
  width:22px; height:36px; border:2px solid rgba(255,255,255,0.5); border-radius:12px;
  position:relative; display:block;
}
.scroll-indicator-dot::before{
  content:''; position:absolute; top:6px; left:50%; width:4px; height:8px; margin-left:-2px;
  background: var(--accent-gold-bright); border-radius:2px;
  animation: scrollDotMove 1.6s ease-in-out infinite;
}
@keyframes scrollDotMove{
  0%{ transform: translateY(0); opacity:1; }
  70%{ opacity:0; }
  100%{ transform: translateY(14px); opacity:0; }
}

/* ---------- Scroll-reveal (elements fade/slide in as they enter viewport) ---------- */
.reveal-on-scroll{
  opacity:0; transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1);
}
.reveal-on-scroll.in-view{ opacity:1; transform: translateY(0); }

/* Stagger child cards inside revealed grids/rows for a cascading entrance */
.tier-board.in-view .tier-row{ animation: fadeUpIn .6s ease both; }
.tier-board.in-view .tier-row:nth-child(1){ animation-delay: .05s; }
.tier-board.in-view .tier-row:nth-child(2){ animation-delay: .15s; }
.tier-board.in-view .tier-row:nth-child(3){ animation-delay: .25s; }
.tier-board.in-view .tier-row:nth-child(4){ animation-delay: .35s; }
.tier-row.in-view .tier-char-card{ animation: fadeUpIn .5s ease both; }
.tier-row.in-view .tier-char-card:nth-child(1){ animation-delay:.05s; }
.tier-row.in-view .tier-char-card:nth-child(2){ animation-delay:.1s; }
.tier-row.in-view .tier-char-card:nth-child(3){ animation-delay:.15s; }
.tier-row.in-view .tier-char-card:nth-child(4){ animation-delay:.2s; }
.tier-row.in-view .tier-char-card:nth-child(5){ animation-delay:.25s; }
.tier-row.in-view .tier-char-card:nth-child(6){ animation-delay:.3s; }
.list-grid.in-view .guide-card{ animation: fadeUpIn .55s ease both; }
.list-grid.in-view .guide-card:nth-child(1){ animation-delay:.05s; }
.list-grid.in-view .guide-card:nth-child(2){ animation-delay:.15s; }
.list-grid.in-view .guide-card:nth-child(3){ animation-delay:.25s; }

/* ---------- Section title accent underline sweep ---------- */
.section-head .section-title{ position:relative; display:inline-block; }
.section-head.in-view .section-title::after{
  content:''; position:absolute; left:0; bottom:-8px; height:3px; width:0;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-bright));
  animation: underlineGrow .8s ease .2s forwards;
}
@keyframes underlineGrow{ to{ width:56px; } }

/* ---------- Card hover shine sweep (character / guide cards) ---------- */
.char-card, .tier-char-card, .guide-card{ position:relative; }
.char-card::before, .tier-char-card::before, .guide-card::before{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: none;
}
.char-card:hover::before, .tier-char-card:hover::before, .guide-card:hover::before{
  animation: shineSweep .9s ease;
}
@keyframes shineSweep{
  from{ transform: translateX(-120%); }
  to{ transform: translateX(120%); }
}

/* Lift + glow border intensifies on hover (layered on top of existing style.css hover rules) */
.tier-char-card:hover, .char-card:hover{
  box-shadow: 0 14px 30px -10px rgba(63,109,245,0.35);
}
.guide-card:hover{
  box-shadow: 0 14px 30px -10px rgba(63,109,245,0.3);
}

/* Tier label chip subtle glow pulse per tier color */
.tier-row-label{ position:relative; overflow:hidden; }
.tier-row-label.tier-S{ animation: tierPulseS 2.6s ease-in-out infinite; }
.tier-row-label.tier-A{ animation: tierPulseA 2.6s ease-in-out infinite; }
@keyframes tierPulseS{
  0%,100%{ box-shadow: 0 0 0 rgba(229,72,77,0); }
  50%{ box-shadow: 0 0 16px rgba(229,72,77,0.35); }
}
@keyframes tierPulseA{
  0%,100%{ box-shadow: 0 0 0 rgba(63,109,245,0); }
  50%{ box-shadow: 0 0 16px rgba(63,109,245,0.3); }
}

/* ---------- Notice strip icon pulse ---------- */
.notice-strip .nlabel{ position:relative; animation: noticePulse 2s ease-in-out infinite; }
@keyframes noticePulse{
  0%,100%{ box-shadow: 0 0 0 rgba(63,109,245,0); }
  50%{ box-shadow: 0 0 10px rgba(63,109,245,0.5); }
}

/* ---------- Back-to-top button ---------- */
.back-to-top{
  position: fixed; right: 26px; bottom: 26px; z-index: 300;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent-gold); color:#fff; border: none;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  box-shadow: 0 6px 18px rgba(63,109,245,0.45);
  cursor:pointer; opacity:0; visibility:hidden; transform: translateY(16px) scale(.8);
  transition: opacity .3s, transform .3s, background .25s;
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0) scale(1); }
.back-to-top:hover{ background: var(--accent-gold-bright); transform: translateY(-3px) scale(1.05); }

/* ---------- Respect reduced motion preference ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-bg, .hero-glow, .hero-particle, .shimmer-text, .btn-glow::after,
  .scroll-indicator-dot::before, .tier-row-label.tier-S, .tier-row-label.tier-A,
  .notice-strip .nlabel, .hero-eyebrow, .hero-title, .hero-desc, .hero-actions{
    animation: none !important;
  }
  .reveal-on-scroll{ opacity:1 !important; transform:none !important; transition:none !important; }
}

@media (max-width: 768px){
  .hero-glow-1{ width:260px; height:260px; }
  .hero-glow-2{ width:220px; height:220px; }
  .hero-glow-3{ display:none; }
  .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; font-size:16px; }
  .scroll-indicator{ display:none; }
}