/* ==========================================================================
   Blink Store — homepage-only enhancements
   Loaded in addition to app.css, only on index.php. Everything here is
   scoped under #blink-home so no other page's layout can be touched, and
   every custom-property or class name from app.css is reused, never
   redefined. Motion is opt-in: it only runs once .js is on <html> (set by
   a tiny inline script) and prefers-reduced-motion:reduce is already
   handled globally by app.css, which strips all transitions/animations.
   ========================================================================== */

#blink-home {
  --glow-yellow: rgba(255, 216, 0, .5);
  --glow-lime: rgba(124, 255, 0, .45);
  position: relative;
  isolation: isolate;
}

/* ------------------------------------------------------- scroll reveals */

.js #blink-home .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,.8,.24,1), transform .8s cubic-bezier(.16,.8,.24,1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.js #blink-home .reveal.in { opacity: 1; transform: none; }

/* stagger children of a reveal-group automatically */
.reveal-group > * { --d: calc(var(--i, 0) * .08s); }

/* ===================================================================== hero */

#blink-home .hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(62% 85% at 100% 100%, rgba(52, 150, 96, .55) 0%, rgba(24, 68, 62, .3) 38%, transparent 72%),
    radial-gradient(55% 60% at 96% 18%, rgba(38, 110, 88, .28) 0%, transparent 65%),
    linear-gradient(115deg, #0a1140 0%, #0c1a5e 38%, #0f2258 62%, #12302f 100%);
  background-size: 160% 160%;
  background-position: 0% 0%;
}
.js #blink-home .hero { animation: hero-drift 22s ease-in-out infinite alternate; }
@keyframes hero-drift {
  0%   { background-position: 0% 10%; }
  50%  { background-position: 60% 70%; }
  100% { background-position: 100% 30%; }
}
#blink-home .hero::before { display: none; }

.hero-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-shapes .shape { position: absolute; border-radius: 50%; filter: blur(70px); }
.hero-shapes .sh1 { width: 30rem; height: 30rem; left: -8rem; top: -10rem; background: radial-gradient(circle, rgba(255,216,0,.12) 0%, transparent 72%); }
.hero-shapes .sh2 { width: 24rem; height: 24rem; right: -6rem; top: -4rem; background: radial-gradient(circle, rgba(124,255,0,.16) 0%, transparent 72%); }
.hero-shapes .sh3 { width: 34rem; height: 34rem; left: 20%; bottom: -20rem; background: radial-gradient(circle, rgba(46,140,100,.28) 0%, transparent 70%); }
.js .hero-shapes .sh1 { animation: drift1 18s ease-in-out infinite; }
.js .hero-shapes .sh2 { animation: drift2 22s ease-in-out infinite; }
.js .hero-shapes .sh3 { animation: drift3 26s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(2.5rem,1.5rem) scale(1.1); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-2rem,2rem) scale(1.08); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-1.5rem,-1.5rem) scale(1.12); } }

#blink-home .hero-inner { position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .01em;
  padding: .45rem .9rem .45rem .7rem; border-radius: 99px; margin-bottom: 1.1rem;
  backdrop-filter: blur(6px);
}
.eyebrow .pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime-deep); flex: none;
  box-shadow: 0 0 0 0 var(--glow-lime);
}
.js .eyebrow .pulse-dot { animation: pulse-ring 2.2s ease-out infinite; }
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--glow-lime); }
  70%  { box-shadow: 0 0 0 9px rgba(124,255,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,255,0,0); }
}

#blink-home .hero h1 { color: #fff; max-width: 16ch; }
#blink-home .hero .accent-mark {
  position: relative; white-space: nowrap;
  color: var(--yellow); background-image: none;
}

#blink-home .hero-sub { color: rgba(255,255,255,.72); }
#blink-home .search-hints { color: rgba(255,255,255,.6); }
#blink-home .search-hints a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
#blink-home .search-hints a:hover { text-decoration-color: #fff; }
#blink-home .hero-meta { border-top-color: rgba(255,255,255,.16); }
#blink-home .hero-meta b { color: #fff; }
#blink-home .hero-meta span { color: rgba(255,255,255,.65); }

/* glass search -> crisp light card, now that the hero itself is light */
#blink-home .hero-search .searchbox {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  transition: box-shadow .35s ease, transform .35s ease;
}
#blink-home .hero-search .searchbox:focus-within {
  box-shadow: 0 0 0 4px var(--glow-yellow), var(--sh-2);
  transform: translateY(-2px);
}

/* magnetic / glow buttons, homepage hero + CTA band only */
#blink-home .btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s ease, box-shadow .35s ease, background-color .25s ease;
}
#blink-home .btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
#blink-home .btn:hover::after { transform: translateX(120%); }
#blink-home .btn:hover { transform: translateY(-2px); }
#blink-home .btn.lg:hover { box-shadow: 0 12px 30px var(--glow-yellow); }

#blink-home .hero .btn-outline-navy { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
#blink-home .hero .btn-outline-navy:hover { background: #fff; color: var(--navy); border-color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.25); }

/* stat cards */
#blink-home .hero-meta { gap: 1.2rem; }
#blink-home .hero-meta > div {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r); padding: .8rem 1.1rem;
  transition: transform .3s ease, background-color .3s ease;
}
#blink-home .hero-meta > div:hover { transform: translateY(-3px); background: rgba(255,255,255,.1); }

/* floating hero art */
#blink-home .shotstack figure {
  border-color: rgba(7,20,92,.08);
  transition: transform .45s ease, box-shadow .45s ease;
}
.js #blink-home .shotstack .s1 { animation: float1 7s ease-in-out infinite; }
.js #blink-home .shotstack .s2 { animation: float2 8s ease-in-out infinite; }
.js #blink-home .shotstack .s3 { animation: float3 6.5s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.6rem); } }
@keyframes float2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(.55rem); } }
@keyframes float3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.4rem); } }
#blink-home .shotstack figure:hover { transform: translateY(-.4rem) scale(1.015); box-shadow: 0 28px 54px rgba(4,12,60,.4); }
#blink-home .demo-dot { box-shadow: 0 8px 20px rgba(4,12,60,.28); }

/* ================================================================== trust */

#blink-home .trust { background: var(--wash); }
#blink-home .trust-grid > div {
  border-radius: var(--r); padding: .5rem .75rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
#blink-home .trust-grid > div:hover { transform: translateY(-2px); box-shadow: var(--sh-2); background: var(--paper); }
#blink-home .trust-grid svg { transition: transform .3s ease; }
#blink-home .trust-grid > div:hover svg { transform: scale(1.15) rotate(-4deg); color: var(--navy-mid); }

/* ============================================================ categories */

#blink-home .cat-card { position: relative; overflow: hidden; }
#blink-home .cat-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120px 120px at 15% 15%, var(--yellow-wash), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
}
#blink-home .cat-card:hover::before { opacity: 1; }
#blink-home .cat-card > * { position: relative; z-index: 1; }
#blink-home .cat-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
#blink-home .cat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
#blink-home .cat-ic { transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color .3s ease; }
#blink-home .cat-card:hover .cat-ic { transform: rotate(-8deg) scale(1.12); }

/* ============================================================ product grid */

#blink-home .card {
  transition: transform .4s cubic-bezier(.16,.8,.24,1), box-shadow .4s ease;
}
#blink-home .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-3), 0 0 0 2px var(--yellow);
}
#blink-home .ribbon { overflow: hidden; }
#blink-home .ribbon::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  transform: translateX(-120%);
}
.js #blink-home .ribbon::after { animation: ribbon-sheen 3.2s ease-in-out infinite; }
@keyframes ribbon-sheen { 0%,60%,100% { transform: translateX(-120%); } 80% { transform: translateX(120%); } }

/* ========================================================= how it works */

#blink-home .steps { position: relative; }
#blink-home .steps li {
  transition: transform .3s ease, box-shadow .3s ease;
}
#blink-home .steps li:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
#blink-home .steps li::before {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background-color .3s ease;
}
#blink-home .steps li:hover::before { transform: scale(1.1); background: var(--yellow); }

#blink-home .band {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}
#blink-home .band::before {
  content: ""; position: absolute; inset: -40%; z-index: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,216,0,.25) 60deg, transparent 140deg, rgba(124,255,0,.2) 220deg, transparent 320deg);
}
.js #blink-home .band::before { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#blink-home .band > * { position: relative; z-index: 1; }

#blink-home .empty-state .btn { margin-top: 1.25rem; }

/* count-up numbers keep the layout stable while animating */
.count { font-variant-numeric: tabular-nums; }

/* ---- header gets a touch more presence once the page has scrolled ---- */
.store-bar.scrolled { box-shadow: var(--sh-2); }

/* ==================================================================== mobile
   Fine-tuning on top of app.css's own breakpoints — nothing here overrides
   layout, only trims motion/decoration that costs more than it's worth on
   small screens. */

@media (max-width: 960px) {
  .hero-shapes .shape { filter: blur(45px); }
  #blink-home .eyebrow { font-size: .74rem; }
}

@media (max-width: 620px) {
  .hero-shapes .sh3 { display: none; }
  #blink-home .hero-meta { grid-template-columns: repeat(3, 1fr); display: grid; gap: .6rem; }
  #blink-home .hero-meta > div { padding: .65rem .5rem; text-align: center; }
  #blink-home .card:hover { transform: none; }
  #blink-home .cat-card:hover { transform: none; }
}

@media (max-width: 400px) {
  .eyebrow span.eyebrow-text { max-width: 15rem; }
}

@media (hover: none) {
  #blink-home .cat-card::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shapes .shape, .js #blink-home .shotstack figure, .js #blink-home .band::before, .js .eyebrow .pulse-dot {
    animation: none !important;
  }
}