/* =============================================================================
   Marketing pages: scroll-reveal system + full-viewport hero treatment.
   Loaded only by views/partials/marketing-head.ejs (umbrella.ejs, acs.ejs,
   home.ejs) -- kept out of common.css on purpose so it never bleeds into the
   authenticated NOC console, and the console never pays for these bytes.

   Reveal usage: add data-reveal="up|down|left|right|scale|fade" to an
   element; public/js/marketing-reveal.js adds .is-visible via
   IntersectionObserver the first time it scrolls into view (unobserves
   after, so it never re-triggers). Wrap a set of siblings in .stagger-group
   to auto-offset each child's transition-delay -- no per-element inline
   styles needed for the common 1-9-item grids these pages use.
   ============================================================================= */

/* Only hide [data-reveal] elements once html.js confirms the reveal script
   actually has a chance to run (set synchronously in <head>, before first
   paint -- see marketing-head.ejs). No JS class => no hiding => the page
   degrades to "everything already visible," never stuck invisible waiting
   on a script that failed to load. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.js [data-reveal="up"] { transform: translateY(28px); }
  html.js [data-reveal="down"] { transform: translateY(-28px); }
  html.js [data-reveal="left"] { transform: translateX(28px); }
  html.js [data-reveal="right"] { transform: translateX(-28px); }
  html.js [data-reveal="scale"] { transform: scale(0.94); }
  html.js [data-reveal="fade"] { transform: none; }

  /* html.js-scoped to outweigh the html.js [data-reveal="up"|"down"|...]
     rules above (equal specificity would lose on the "up"/etc. rules'
     extra type selector) -- without this prefix, .is-visible's opacity/
     transform reset never actually wins, and the element stays hidden
     forever no matter how many times the observer fires. */
  html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* Auto-stagger up to 9 siblings -- covers every card grid on these pages. */
  .stagger-group [data-reveal]:nth-child(1) { transition-delay: 0ms; }
  .stagger-group [data-reveal]:nth-child(2) { transition-delay: 70ms; }
  .stagger-group [data-reveal]:nth-child(3) { transition-delay: 140ms; }
  .stagger-group [data-reveal]:nth-child(4) { transition-delay: 210ms; }
  .stagger-group [data-reveal]:nth-child(5) { transition-delay: 280ms; }
  .stagger-group [data-reveal]:nth-child(6) { transition-delay: 350ms; }
  .stagger-group [data-reveal]:nth-child(7) { transition-delay: 420ms; }
  .stagger-group [data-reveal]:nth-child(8) { transition-delay: 490ms; }
  .stagger-group [data-reveal]:nth-child(9) { transition-delay: 560ms; }
}

/* An explicit reduced-motion preference always wins, even over html.js. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =============================================================================
   Full-viewport hero background -- layered radial glows + a faint dot grid
   over the existing bg-slate-950, no image assets required. The glows get a
   slow independent drift (60s+ loops, tiny travel distance) so the hero
   feels alive without calling attention to itself; motion is skipped
   entirely under reduced-motion.
   ============================================================================= */
.hero-full {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 26rem at 18% 22%, rgba(99, 102, 241, 0.22), transparent 60%),
    radial-gradient(34rem 24rem at 85% 15%, rgba(16, 185, 129, 0.14), transparent 60%),
    radial-gradient(40rem 30rem at 50% 100%, rgba(99, 102, 241, 0.12), transparent 65%),
    radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.16) 1px, transparent 0);
  background-size: auto, auto, auto, 28px 28px;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: hero-drift 70s ease-in-out infinite alternate; }
}
@keyframes hero-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.04); }
}
.hero-full > * { position: relative; z-index: 1; }
.hero-scroll-cue {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll-cue { animation: hero-bob 2.2s ease-in-out infinite; }
}
@keyframes hero-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* Compact, non-interactive samples of the real billing portal themes. The
   source themes live in mikrotik-billing/services/provisioningService.js;
   these previews keep the marketing page lightweight while showing the
   structure a hotspot visitor sees before login. */
.hotspot-theme-preview { min-height: 0; border-radius: .9rem .9rem 0 0; padding: 0; display: flex; align-items: center; overflow: hidden; }
.hotspot-theme-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hotspot-theme-preview-card { width: 100%; max-width: 19rem; margin: auto; border-radius: .8rem; padding: 1rem; box-shadow: 0 16px 32px rgba(0,0,0,.24); }
.hotspot-theme-preview .portal-badge { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .6rem; color: #fff; font-size: .75rem; font-weight: 800; }
.hotspot-theme-preview h3 { font-size: 1rem; font-weight: 800; margin: .75rem 0 .2rem; }
.hotspot-theme-preview p { font-size: .72rem; margin: 0; opacity: .72; }
.hotspot-theme-plan { display: flex; align-items: center; justify-content: space-between; padding: .62rem; margin-top: .75rem; border-radius: .55rem; font-size: .72rem; font-weight: 700; }
.hotspot-theme-plan small { opacity: .7; }
.hotspot-theme-plan span:last-child { padding: .3rem .55rem; border-radius: .35rem; font-size: .65rem; font-weight: 800; }
.theme-sunset-preview { background: radial-gradient(circle at 15% 10%, rgba(251,146,60,.36), transparent 46%), #150d08; }
.theme-sunset-preview .hotspot-theme-preview-card { background: rgba(40,20,14,.92); color: #fff; }
.theme-sunset-preview .portal-badge,.theme-sunset-preview .hotspot-theme-plan span:last-child { background: linear-gradient(135deg,#f97316,#e11d48); }
.theme-sunset-preview .hotspot-theme-plan { background: rgba(255,255,255,.08); border: 1px solid rgba(251,146,60,.25); }
.theme-daylight-preview { background: radial-gradient(circle at 15% 10%, rgba(59,130,246,.16), transparent 46%), #f8fafc; }
.theme-daylight-preview .hotspot-theme-preview-card { background: #fff; color: #0f172a; border: 1px solid #e2e8f0; }
.theme-daylight-preview .portal-badge,.theme-daylight-preview .hotspot-theme-plan span:last-child { background: linear-gradient(135deg,#2563eb,#0ea5e9); }
.theme-daylight-preview .hotspot-theme-plan { background: #f8fafc; border: 1px solid #e2e8f0; }
.theme-neon-preview { background: radial-gradient(circle at 15% 10%, rgba(34,211,238,.2), transparent 46%), #020409; }
.theme-neon-preview .hotspot-theme-preview-card { background: rgba(2,10,16,.92); color: #e2e8f0; border: 1px solid rgba(34,211,238,.36); box-shadow: 0 0 24px rgba(34,211,238,.16); }
.theme-neon-preview .portal-badge,.theme-neon-preview .hotspot-theme-plan span:last-child { background: linear-gradient(135deg,#22d3ee,#4ade80); color: #031014; }
.theme-neon-preview .hotspot-theme-plan { background: rgba(34,211,238,.06); border: 1px solid rgba(34,211,238,.24); }
.marketing-ad-preview { background: linear-gradient(135deg,#111827,#312e81 54%,#0f766e); color: #fff; border-radius: 1rem; overflow: hidden; }
.marketing-ad-phone { max-width: 18rem; margin: auto; padding: .7rem; border-radius: 1.55rem; background: #0b1020; border: 4px solid rgba(255,255,255,.16); box-shadow: 0 22px 45px rgba(0,0,0,.32); }
.marketing-ad-screen { padding: .85rem; border-radius: 1rem; background: linear-gradient(155deg,#172554,#0f766e); }
.marketing-ad-offer { padding: .7rem; border-radius: .7rem; margin-top: .7rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.marketing-ad-offer small { display: block; letter-spacing: .08em; font-size: .62rem; font-weight: 800; color: #a7f3d0; }
.marketing-ad-offer p { margin: .25rem 0 .5rem; font-size: .78rem; opacity: 1; }
.marketing-ad-offer span { display: inline-block; padding: .35rem .55rem; border-radius: .4rem; background: #fff; color: #0f766e; font-size: .65rem; font-weight: 800; }