/* BETTAHUB - JEWEL AQUARIUM (load after home.css; replaces home-modern.css) */
:root{
  --ink:#06222b; --deep:#0a3340; --paper:#f5fbfa;
  --blue:#38bdf8; --accent:#0284c7; --gold:#fbbf24;
  --primary:#0f766e; --primary-dark:#115e59; --primary-light:#ecfdf5;
  --dark:#0f172a; --muted:#64748b; --border:#e2e8f0; --success:#16a34a; --danger:#dc2626;
  --display:"Bricolage Grotesque","Inter",Arial,sans-serif;
}
body{background:var(--paper)}
h1,h2,h3,.logo{font-family:var(--display)}

/* HEADER: white bar */
header{background:#fff;border-bottom:1px solid var(--border);transition:background .3s,box-shadow .3s}
header.scrolled{background:#fff;box-shadow:0 10px 30px rgba(6,34,43,.12)}
.logo{color:var(--ink)}
.logo-icon{background:#e8f4f2}
.nav-links a{color:#475569}
.nav-links a:hover,.nav-links a.active{color:var(--accent)}
.icon-button{background:#f1f5f9;color:var(--ink);border:0;box-shadow:none}
.icon-button:hover{background:var(--gold)}
.cart-count{background:var(--accent);color:#fff;font-weight:700;box-shadow:0 0 0 2px #fff}
.login-button{background:var(--accent);box-shadow:0 8px 22px rgba(2,132,199,.4)}
.login-button:hover{background:#0369a1}

/* HERO */
.hero{position:relative;min-height:640px;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 78% 40%,rgba(56,189,248,.28),transparent 38%),
             radial-gradient(circle at 12% 100%,rgba(2,132,199,.16),transparent 40%),
             linear-gradient(160deg,var(--deep),var(--ink))}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(100deg,transparent 0 90px,rgba(255,255,255,.025) 90px 140px);
  animation:rays 14s ease-in-out infinite alternate}
@keyframes rays{to{transform:translateX(60px)}}
.hero-content{position:relative;z-index:2;min-height:640px;grid-template-columns:1.05fr .95fr}
.hero h1{font-size:clamp(52px,7vw,96px);font-weight:800;line-height:.95;letter-spacing:-.045em;color:#fff}
.hero p{color:#b6d3da;font-size:17px;max-width:460px}
.primary-button{background:var(--accent);box-shadow:0 12px 30px rgba(2,132,199,.4)}
.primary-button:hover{background:#0369a1}
.secondary-button{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.secondary-button:hover{border-color:var(--blue);color:var(--blue)}

/* Single orchestrated entrance */
.hero h1,.hero-text>p,.hero-buttons,.spotlight{opacity:0;animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1{animation-delay:.1s}.hero-text>p{animation-delay:.3s}.hero-buttons{animation-delay:.45s}.spotlight{animation-delay:.35s}
@keyframes up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* HERO FISH: no box, just the betta floating with a glowing design around it */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
/* big outlined word behind the fish */
.hero-visual::before{content:"BETTA";position:absolute;left:50%;top:200px;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:800;font-size:clamp(90px,12vw,150px);letter-spacing:-.04em;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(160,235,255,.18);white-space:nowrap;pointer-events:none;z-index:0}

.spotlight{position:relative;isolation:isolate;width:min(460px,100%);padding:0;border:0;border-radius:0;
  background:none;backdrop-filter:none;box-shadow:none;
  transform:translate(calc(var(--mx,0)*14px),calc(var(--my,0)*10px))}

/* sparkles around the fish (they only twinkle, nothing moves) */
.spotlight::before{content:"";position:absolute;inset:-30px;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 12% 20%,#fff 0 2px,transparent 3.5px),
    radial-gradient(circle at 88% 14%,rgba(190,245,255,.95) 0 3px,transparent 5px),
    radial-gradient(circle at 93% 58%,#fff 0 2px,transparent 3.5px),
    radial-gradient(circle at 5% 66%,rgba(255,214,120,.95) 0 2.5px,transparent 4.5px),
    radial-gradient(circle at 76% 88%,#fff 0 1.5px,transparent 3px),
    radial-gradient(circle at 28% 6%,rgba(190,245,255,.85) 0 1.5px,transparent 3px),
    radial-gradient(circle at 60% 3%,rgba(255,255,255,.9) 0 1.5px,transparent 3px);
  animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}

/* glowing rings behind the fish */
.spotlight::after{content:"";position:absolute;left:50%;top:200px;width:400px;height:400px;
  transform:translate(-50%,-50%) rotate(-28deg);border-radius:50%;pointer-events:none;z-index:0;
  border:1.5px solid rgba(160,235,255,.12);border-top-color:rgba(200,248,255,.75);border-right-color:rgba(160,235,255,.35);
  box-shadow:0 0 0 44px rgba(255,255,255,.02),0 0 0 45px rgba(160,235,255,.12),
             0 0 0 96px rgba(255,255,255,.012),0 0 0 97px rgba(160,235,255,.07),
             0 0 70px rgba(56,189,248,.28),inset 0 0 70px rgba(56,189,248,.18)}

/* the fish itself: no frame, glowing */
.spot-photo{position:relative;z-index:1;height:400px;display:flex;align-items:center;justify-content:center;
  background:none;box-shadow:none;border-radius:0;overflow:visible}
.spot-photo::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 44% at 50% 52%,rgba(190,245,255,.55),rgba(125,225,255,.22) 45%,transparent 72%);
  filter:blur(16px);animation:aura 5s ease-in-out infinite}
@keyframes aura{0%,100%{opacity:.5}50%{opacity:1}}
.spot-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("../assets/hero-betta.png") center 50% / 98% no-repeat;
  filter:drop-shadow(0 0 14px rgba(170,240,255,.65)) drop-shadow(0 0 40px rgba(56,189,248,.40))}
.spot-photo .fish{display:none}
/* if home.js puts a product photo here, show it as a glowing circle instead of the betta */
.spot-photo:has(img)::after{display:none}
.spot-photo img{position:relative;z-index:2;width:340px;height:340px;max-width:100%;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px rgba(190,245,255,.6),0 0 60px rgba(56,189,248,.45)}

@media(max-width:700px){
  .spotlight::after{width:260px;height:260px;top:130px}
  .hero-visual::before{top:130px;font-size:80px}
  .spot-photo img{width:240px;height:240px}
}
.spot-info{display:none}
.spot-info small{color:var(--blue);font-weight:600;font-size:12px}
.spot-info strong{display:block;font-family:var(--display);font-size:24px;line-height:1.15;margin-top:2px}
.spot-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
.spot-row span{font-family:var(--display);font-size:26px;font-weight:800;color:var(--gold)}
.spot-btn{border:0;border-radius:10px;padding:11px 16px;background:#fff;color:var(--ink);font-weight:700;font-size:13px;transition:transform .2s,background .2s}
.spot-btn:hover{transform:translateY(-2px);background:var(--gold);box-shadow:0 0 22px rgba(251,191,36,.55)}

/* FLOATING BADGES around the hero fish (5.0 / In Stock / Easy Ordering) */
.float-badge{position:absolute;z-index:3;display:flex;flex-direction:column;gap:2px;
  padding:12px 18px;border-radius:16px;background:#fff;color:var(--ink);
  box-shadow:0 14px 34px rgba(0,0,0,.32);font-size:13px;white-space:nowrap;
  animation:badgeFloat 5s ease-in-out infinite}
.float-badge strong{font-family:var(--display);font-size:15px;font-weight:800;color:var(--primary-dark)}
.float-badge span{font-size:12px;color:var(--muted);font-weight:500}
.fb-rating{top:70px;left:-50px}
.fb-stock{bottom:80px;right:-60px;animation-delay:-1.6s}
.fb-order{bottom:-18px;left:10px;animation-delay:-3.2s}
@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Bubbles */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.bubble{position:absolute;bottom:-40px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),rgba(125,211,252,.12));
  border:1px solid rgba(255,255,255,.35);animation:rise linear infinite}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.8}50%{transform:translate(16px,-320px)}100%{transform:translate(-14px,-700px);opacity:0}}

/* TRUST STRIP */
.trust{background:var(--ink);border-top:1px solid rgba(255,255,255,.08)}
.trust-row{display:flex;justify-content:space-between;gap:20px;padding:16px 0;color:#9fc3cb;font-size:13px;font-weight:500;flex-wrap:wrap}
.trust-row span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-right:9px}

/* SECTIONS */
.section-header h2{font-size:38px;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.view-all{color:var(--accent)}

/* CATEGORY TILES (swap background-image for your own photos) */
.category-card{position:relative;min-height:230px;padding:24px;align-items:flex-end;border:0;border-radius:24px;overflow:hidden;color:#fff;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.tile-fish{background:linear-gradient(150deg,#0ea5e9,#0369a1 65%,#06222b)}
.tile-food{background:linear-gradient(150deg,#fbbf24,#f97316 65%,#9a3412)}
.tile-tank{background:linear-gradient(150deg,#38bdf8,#0f766e 65%,#06222b)}
.tile-emoji{position:absolute;right:-6px;top:-8px;font-size:130px;opacity:.28;transition:transform .5s;filter:blur(.3px)}
.category-card:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(6,34,43,.25)}
.category-card:hover .tile-emoji{transform:scale(1.15) rotate(-8deg);opacity:.4}
.category-card h3{font-size:24px;color:#fff}
.category-card p{color:rgba(255,255,255,.85);font-size:13px}

/* PRODUCTS: swipeable row */
.products-section{background:#e8f4f2}
.product-grid{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 24px;scrollbar-width:thin}
.home-product-loading{padding:50px;color:var(--muted);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.home-product-empty{padding:50px;text-align:center;color:var(--muted)}

/* PRODUCT CARD */
.product-card{flex:0 0 270px;scroll-snap-align:start;display:flex;flex-direction:column;
  background:#fff;border:0;border-radius:22px;overflow:hidden;
  box-shadow:0 6px 20px rgba(6,34,43,.08);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.product-card:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(6,34,43,.18)}

.product-image{height:200px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#ccfbf1,#e0f2fe)}
.product-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.product-card:hover .product-image img{transform:scale(1.08)}
.product-placeholder{font-size:72px;line-height:1;transform:scaleX(-1)}

.product-info{display:flex;flex-direction:column;flex:1;padding:18px}
.product-info .product-category{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.product-info .product-name{margin-top:6px;font-family:var(--display);font-size:18px;line-height:1.25;color:var(--ink)}
.product-info .product-description{margin-top:8px;font-size:13px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(13px * 1.5 * 2)}

.product-bottom{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.product-price{font-family:var(--display);font-size:22px;font-weight:800;color:var(--ink)}
.stock-badge{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.stock-badge.in-stock{background:#dcfce7;color:#15803d}
.stock-badge.low-stock{background:#ffedd5;color:#c2410c}
.stock-badge.out-of-stock{background:#fee2e2;color:#b91c1c}

.product-view-btn{margin-top:14px;width:100%;height:42px;border:0;border-radius:12px;
  background:var(--ink);color:#fff;font-size:13px;font-weight:700;
  transition:background .2s,transform .2s}
.product-view-btn:hover{background:var(--accent);transform:translateY(-1px)}

/* FEATURES: light, ruled, no card kit */
.features-section{background:var(--paper);color:var(--ink);padding:90px 0}
.features-section h2{color:var(--ink)}.features-section .section-header p{color:var(--muted)}
.features-grid{gap:0}
.feature-card{background:none;border:0;border-top:3px solid var(--ink);border-radius:0;padding:22px 22px 10px 0;backdrop-filter:none;transition:border-color .3s}
.feature-card:hover{transform:none;background:none;border-color:var(--accent)}
.feature-card h3{font-size:20px;color:var(--ink)}
.feature-card p{color:var(--muted);font-size:14px}

/* ABOUT + FOOTER */
.about-box{background:linear-gradient(150deg,var(--deep),var(--ink));border:0;color:#fff;position:relative;overflow:hidden}
.about-box h2{color:#fff;font-weight:800}.about-box p{color:#a8c5cc;font-size:15px}
.about-box::after{content:"🐟";position:absolute;right:30px;bottom:-40px;font-size:170px;opacity:.07;transform:scaleX(-1)}
.about-box>*{position:relative;z-index:1}
footer{background:var(--ink)}

/* REVEAL (JS adds .js-reveal) */
.js-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js-reveal.in{opacity:1;transform:none}

a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

@media(max-width:1000px){
  .hero-content{grid-template-columns:1fr;padding:50px 0 70px}
  .hero-text{text-align:left;margin:0}.hero-buttons{justify-content:flex-start}
  .spotlight{margin:0 auto}
  .fb-rating{left:-10px}
  .fb-stock{right:-10px}
}
@media(max-width:700px){
  .hero h1{font-size:54px}.spot-photo{height:260px}
  .product-card{flex-basis:230px}.features-grid{grid-template-columns:1fr}
  .float-badge{padding:9px 12px;font-size:11px}
  .float-badge strong{font-size:13px}
  .fb-rating{top:30px;left:0}
  .fb-stock{bottom:50px;right:0}
  .fb-order{bottom:-14px;left:6px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1,.hero-text>p,.hero-buttons,.spotlight,.js-reveal{opacity:1!important;transform:none!important}
  .bubbles{display:none}
}