/* ============================================================
   Amaan Frozen Foods — Futuristic Ocean Theme
   Dark ocean + cyan glow. Loaded on all storefront pages.
   ============================================================ */

:root{
  --abyss:#04070f;
  --ocean:#0a1628;
  --ocean-2:#0e1e38;
  --chrome:#c8d4e0;
  --ice:#e8f4fb;
  --cyan:#22d3ee;
  --glow:#0ea5e9;
  --muted:#7d93ad;
  --line:rgba(120,180,220,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--abyss);
  color:var(--ice);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
}
.font-display{font-family:'Space Grotesk','Inter',sans-serif}

/* Ambient ocean gradient + drifting glow blobs behind everything */
.bg-ocean{position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 20%, rgba(14,165,233,.10), transparent 55%),
    linear-gradient(180deg,#04070f 0%,#0a1628 45%,#04070f 100%);
}
.bg-grid{position:fixed;inset:0;z-index:-2;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%);
}
#particles{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Glow ring around logo */
.logo-ring{position:relative;display:inline-block;flex:none}
.logo-ring img{display:block;position:relative;z-index:1;object-fit:cover;border-radius:9999px}
.logo-ring::before{content:'';position:absolute;inset:-4px;border-radius:9999px;
  background:conic-gradient(from 0deg,transparent,var(--cyan),transparent 55%);
  animation:spin 6s linear infinite;filter:blur(2px);opacity:.8}
@keyframes spin{to{transform:rotate(360deg)}}
/* Hard size caps so the logo can never flash oversized before Tailwind loads */
header .logo-ring,header .logo-ring img{width:44px;height:44px}
footer .logo-ring,footer .logo-ring img{width:36px;height:36px}
aside .logo-ring,aside .logo-ring img{width:40px;height:40px}
/* Hero logo (large, floating) */
.logo-hero,.logo-hero img{width:224px;height:224px}
@media(min-width:768px){.logo-hero,.logo-hero img{width:288px;height:288px}}

/* Glass surfaces */
.glass{background:linear-gradient(180deg,rgba(20,40,70,.55),rgba(10,22,40,.55));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:20px}

/* Buttons */
.btn-glow{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(90deg,var(--glow),var(--cyan));
  color:#04141c;font-weight:600;border:0;border-radius:12px;
  padding:.7rem 1.3rem;cursor:pointer;transition:transform .2s,box-shadow .3s;
  box-shadow:0 0 0 rgba(34,211,238,0)}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 8px 30px -6px rgba(34,211,238,.6)}
.btn-glow:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{border:1px solid var(--line);color:var(--ice);border-radius:12px;
  padding:.7rem 1.3rem;transition:.2s;background:transparent}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 20px -6px rgba(34,211,238,.5)}

/* Product card */
.pcard{position:relative;overflow:hidden;transition:transform .35s,box-shadow .35s;}
.pcard::after{content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--line);transition:.35s}
.pcard:hover{transform:translateY(-8px)}
.pcard:hover::after{box-shadow:inset 0 0 0 1px rgba(34,211,238,.5),0 24px 60px -20px rgba(34,211,238,.35)}
.pcard img{transition:transform .5s}
.pcard:hover img{transform:scale(1.06)}

/* Frost shimmer sweep on hover */
.shimmer::before{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(232,244,251,.25),transparent);
  transform:skewX(-20deg);transition:.6s;z-index:2}
.shimmer:hover::before{left:130%}

/* Reveal on scroll — VISIBLE BY DEFAULT, animation only enhances.
   Content must never stay hidden even if JS fails. */
.reveal{opacity:1;transform:none}
.js-on .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js-on .reveal.in{opacity:1;transform:none}

/* Hero title gradient */
.hero-title{
  background:linear-gradient(180deg,#eafbff,#7fd8ea 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Eyebrow chip */
.chip{display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);border:1px solid var(--line);
  padding:.35rem .8rem;border-radius:9999px;background:rgba(34,211,238,.05)}
.chip .dot{width:6px;height:6px;border-radius:9999px;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Floating animation */
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Inputs */
.fld{width:100%;background:rgba(6,14,26,.6);border:1px solid var(--line);color:var(--ice);
  border-radius:12px;padding:.8rem 1rem;transition:.2s}
.fld:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.15)}
.fld::placeholder{color:var(--muted)}

a{color:inherit}
.link-cyan{color:var(--cyan)}
.divider{height:1px;background:var(--line);border:0}

/* Marquee strip */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee span{display:inline-block;padding:.8rem 0;animation:slide 22s linear infinite;color:var(--muted);
  font-family:'Space Grotesk',sans-serif;letter-spacing:.15em;text-transform:uppercase;font-size:.8rem}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}