/* SeaSky — Category Coverflow
   Dark, compact, ILYN-style coverflow of WooCommerce product categories.
   Every visual token is a CSS variable so the admin settings page can override
   colours and sizes by emitting a `.ssc{ --… }` block after this file. */

.ssc{
  /* colours */
  --ssc-bg-glow:#17171a;   /* top glow of the section */
  --ssc-bg:#0b0b0c;        /* section base */
  --ssc-bg-deep:#060607;   /* section edges */
  --ssc-ink:#ffffff;       /* eyebrow / title / card name / arrows */
  --ssc-faint:rgba(255,255,255,.42);
  --ssc-frame:#ffffff;     /* light frame behind category images */
  --ssc-card:rgba(255,255,255,.045);
  --ssc-line:rgba(255,255,255,.09);
  --ssc-arrow-line:rgba(255,255,255,.22);
  --ssc-progress:#ffffff;
  --ssc-track:rgba(255,255,255,.16);

  /* sizes */
  --ssc-pad-top:60px;
  --ssc-pad-bottom:52px;
  --ssc-card-w:288px;
  --ssc-card-h:392px;
  --ssc-title-size:clamp(30px,4vw,50px);
  --ssc-name-size:21px;

  /* fonts */
  --ssc-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ssc-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  position:relative;
  padding:var(--ssc-pad-top) 0 var(--ssc-pad-bottom);
  background:radial-gradient(120% 90% at 50% -10%, var(--ssc-bg-glow) 0%, var(--ssc-bg) 44%, var(--ssc-bg-deep) 100%);
  overflow:hidden;
}
.ssc::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:screen;
  background:
    radial-gradient(60% 40% at 15% 20%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(50% 40% at 85% 80%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(40% 30% at 70% 15%, rgba(255,255,255,.03), transparent 60%);
}
.ssc::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ssc__head{position:relative;z-index:2;text-align:center;margin:0 auto 34px}
.ssc__eyebrow{
  margin:0 0 8px;font-family:var(--ssc-sans);
  font-size:11px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--ssc-faint);
}
.ssc__title{
  margin:0;font-family:var(--ssc-serif);font-weight:600;color:var(--ssc-ink);
  font-size:var(--ssc-title-size);line-height:1;letter-spacing:.01em;
}

.ssc__swiper{position:relative;z-index:2;overflow:visible}
.ssc__swiper .swiper-slide{
  width:var(--ssc-card-w);height:var(--ssc-card-h);
  /* opacity is driven per-slide from JS (distance-based fade); keep it in the
     transition list so those changes animate smoothly. */
  transition:opacity .5s ease, filter .5s ease;
  opacity:0;filter:saturate(.72) brightness(.82);
}
.ssc__swiper .swiper-slide-active{filter:none}

/* No dark card chrome (background / border / padding): when coverflow overlaps
   the slides, a card's chrome would poke out from behind the active card as
   dark slivers. The card is just the image frame + the name, so nothing dark
   can render behind the neighbours. */
.ssc-card{
  display:flex;flex-direction:column;height:100%;
  border-radius:8px;text-decoration:none;background:transparent;
}
.ssc-card__frame{
  position:relative;flex:1;border-radius:8px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, var(--ssc-frame) 0%, color-mix(in srgb, var(--ssc-frame) 94%, #000) 62%, color-mix(in srgb, var(--ssc-frame) 90%, #000) 100%);
}
.ssc-card__frame img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.ssc-card:hover .ssc-card__frame img{transform:scale(1.045)}
.ssc-card__name{
  margin:14px 0 0;font-family:var(--ssc-serif);font-weight:600;color:var(--ssc-ink);
  font-size:var(--ssc-name-size);line-height:1.15;letter-spacing:.06em;text-transform:uppercase;text-align:center;
}

.ssc__controls{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  gap:24px;margin-top:32px;
}
.ssc__nav{
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  border:1px solid var(--ssc-arrow-line);background:transparent;color:var(--ssc-ink);
  display:grid;place-items:center;transition:background .25s, border-color .25s, transform .15s;
}
.ssc__nav:hover{background:rgba(255,255,255,.08);border-color:var(--ssc-ink)}
.ssc__nav:active{transform:scale(.94)}
.ssc__nav svg{width:19px;height:19px}
.ssc__progress{width:140px;height:3px;border-radius:3px;background:var(--ssc-track);overflow:hidden}
.ssc__bar{height:100%;background:var(--ssc-progress);border-radius:3px;transition:transform .5s ease, width .5s ease;transform-origin:left}

@media (max-width:560px){
  .ssc{padding:calc(var(--ssc-pad-top) * .8) 0 calc(var(--ssc-pad-bottom) * .8)}
  .ssc__swiper .swiper-slide{width:74vw;height:calc(var(--ssc-card-h) * .95)}
}