/* ==========================================================================
   Shop showcase — wavy colour bands, animated photo galleries, price bursts.
   Loaded only by shop.html, after css/style.css.
   ========================================================================== */

@property --angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes spin-angle{ to{ --angle:360deg; } }
@keyframes wave-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes ticker{ to{ transform:translateX(-50%); } }
@keyframes wiggle{ 0%,100%{ transform:rotate(-7deg) scale(1); } 50%{ transform:rotate(6deg) scale(1.07); } }
@keyframes twinkle{ 0%,100%{ transform:scale(.55) rotate(0); opacity:.35; } 50%{ transform:scale(1.25) rotate(45deg); opacity:1; } }
@keyframes shine{ 0%,55%{ left:-60%; } 100%{ left:130%; } }

a.chip{ display:inline-flex; align-items:center; text-decoration:none; }
a.chip:hover{ background:var(--navy); color:var(--cream); }
.jump{ padding:28px 0 0; }

/* scrolling ribbon */
.ticker-wrap{ overflow:hidden; margin-top:36px; padding:20px 0; }
.ticker{
  position:relative; z-index:2; margin:0 -2%; width:104%; overflow:hidden;
  background:var(--navy); color:var(--cream); transform:rotate(-1.2deg);
  border-top:4px solid var(--accent); border-bottom:4px solid var(--accent);
}
.ticker-track{ display:flex; width:max-content; animation:ticker 30s linear infinite; }
.ticker-track span{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:22px; padding:14px 0 14px 28px; white-space:nowrap; }
.ticker-track span i{ font-style:normal; color:var(--accent); margin-left:28px; }

/* one full-bleed coloured band per product */
.showcases{ position:relative; }
.showcase{
  position:relative; padding:56px 0 96px; scroll-margin-top:90px;
  background-color:var(--band);
  background-image:radial-gradient(rgba(22,34,74,.08) 2.2px, transparent 2.7px);
  background-size:30px 30px;
}
.showcase:first-child{ margin-top:96px; }

/* animated wavy edge sitting on top of each band */
.wave{ position:absolute; left:0; right:0; bottom:calc(100% - 1px); height:84px; overflow:hidden; pointer-events:none; color:var(--band); }
.wave svg{ position:absolute; left:0; bottom:0; width:200%; height:100%; animation:wave-slide 14s linear infinite; }
.wave .w-deep{ color:var(--deep); opacity:.55; bottom:7px; animation-duration:22s; animation-direction:reverse; }
.wave.wave-end{ bottom:-1px; color:var(--cream); z-index:1; }
.wave.wave-end svg{ animation-duration:16s; }

.showcase-inner{
  position:relative; display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr);
  gap:80px; align-items:center; justify-content:center;
}
.showcase.reverse .showcase-inner{ grid-template-columns:minmax(0,1fr) minmax(0,520px); }
.showcase.reverse .gallery{ order:2; }

/* gallery */
.gallery{ position:relative; display:flex; flex-direction:column; gap:26px; }
.frame{
  padding:7px; border-radius:40px; position:relative;
  background:conic-gradient(from var(--angle), var(--deep), #FFD08A, #fff, var(--deep), #BBD9F2, var(--deep));
  animation:spin-angle 6s linear infinite;
  box-shadow:14px 18px 0 rgba(22,34,74,.18);
  transform:rotate(var(--tilt,-1.2deg)); transition:transform .45s cubic-bezier(.3,1.6,.5,1);
}
.frame:hover{ transform:rotate(0) scale(1.012); }
.stage{
  position:relative; aspect-ratio:7/9; border-radius:33px; overflow:hidden;
  border:4px solid var(--navy); background:#fff; touch-action:pan-y; outline-offset:4px;
}
.slide{ position:absolute; inset:0; opacity:0; transform:scale(1.07); transition:opacity .6s ease, transform .9s ease; pointer-events:none; }
.slide.active{ opacity:1; transform:scale(1); pointer-events:auto; }
.slide .bgimg{ position:absolute; top:-24px; left:-24px; width:calc(100% + 48px); height:calc(100% + 48px); object-fit:cover; filter:blur(24px) saturate(1.35); }
.slide .fg{ position:relative; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(22,34,74,.28)); }
.nav-btn{
  position:absolute; top:50%; z-index:3; width:50px; height:50px; padding:0; border-radius:50%;
  background:#fff; color:var(--navy); border:3px solid var(--navy); box-shadow:3px 4px 0 var(--navy);
  font-size:26px; line-height:1; font-weight:700; cursor:pointer; transform:translateY(-50%);
  transition:transform .2s cubic-bezier(.3,1.8,.5,1), background .2s;
}
.nav-btn:hover{ background:var(--deep); color:var(--on-deep); transform:translateY(-50%) scale(1.15) rotate(-6deg); }
.nav-btn.prev{ left:12px; }
.nav-btn.next{ right:12px; }
.counter{
  position:absolute; top:14px; right:14px; z-index:3; padding:6px 14px; border-radius:16px;
  background:var(--navy); color:var(--cream); font-family:'Fredoka',sans-serif; font-weight:600; font-size:15px;
}
.thumbs{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.thumb-btn{
  width:62px; height:80px; padding:0; border-radius:14px; border:3px solid var(--navy); overflow:hidden;
  background:#fff; cursor:pointer; opacity:.72;
  transition:transform .3s cubic-bezier(.3,1.8,.5,1), opacity .2s, box-shadow .2s;
}
.thumb-btn img{ width:100%; height:100%; object-fit:cover; }
.thumb-btn:hover{ opacity:1; transform:translateY(-5px) rotate(-4deg); }
.thumb-btn.active{ opacity:1; transform:translateY(-8px) scale(1.12); box-shadow:4px 6px 0 var(--deep); }

/* product info */
.info{ position:relative; display:flex; flex-direction:column; gap:20px; }
.info-top{ display:flex; gap:10px; flex-wrap:wrap; }
.tagchip{
  padding:8px 16px; border-radius:20px; background:#fff; border:2.5px solid var(--navy);
  font-weight:800; font-size:13px; letter-spacing:.8px; text-transform:uppercase; box-shadow:3px 4px 0 var(--navy);
}
.tagchip.deep{ background:var(--deep); color:var(--on-deep); }
.info h2{ font-weight:700; font-size:clamp(40px,5.2vw,70px); line-height:1; letter-spacing:-1.4px; }
.tagline{
  margin:0; font-family:'Fredoka',sans-serif; font-weight:600; font-size:22px; color:var(--navy-soft);
  text-decoration:underline wavy var(--deep) 3px; text-underline-offset:8px; width:fit-content;
}
.blurb{ margin:0; font-size:19px; line-height:1.6; color:var(--navy-soft); max-width:560px; }
.freq{ margin:0; font-weight:800; font-size:15px; color:var(--navy); display:flex; align-items:center; gap:8px; }
.freq::before{ content:"✦"; color:var(--deep); text-shadow:1.5px 1.5px 0 var(--navy); }
.buy-row{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding-top:8px; }
.burst-wrap{ filter:drop-shadow(5px 6px 0 var(--navy)); animation:wiggle 3.4s ease-in-out infinite; }
.burst{
  width:150px; height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--deep); color:var(--on-deep); text-align:center; gap:2px;
}
.burst b{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:38px; line-height:1; }
.burst small{ font-weight:800; font-size:13px; letter-spacing:.6px; text-transform:uppercase; }
.price-note{ font-weight:800; font-size:14px; color:var(--navy-soft); max-width:130px; line-height:1.35; }
.shine{ position:relative; overflow:hidden; }
.shine::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.8), transparent);
  transform:skewX(-20deg); animation:shine 3.2s ease-in-out infinite;
}
.spark{
  position:absolute; color:var(--deep); font-size:28px; line-height:1; pointer-events:none;
  text-shadow:2px 2px 0 var(--navy); animation:twinkle 2.6s ease-in-out infinite;
}


/* community band */
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-12px) rotate(var(--r,0deg)); } }
.champs{
  --band:#16224A; --deep:#FF9F1C;
  position:relative; margin-top:110px; padding:72px 0 96px; color:var(--cream);
  background-color:var(--band);
  background-image:radial-gradient(rgba(255,255,255,.07) 2.2px, transparent 2.7px);
  background-size:30px 30px;
}
.champs-inner{ max-width:1440px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:64px; align-items:center; }
.champs-copy{ display:flex; flex-direction:column; gap:20px; }
.champs-copy .tagchip{ align-self:flex-start; color:var(--navy); }
.champs h2{ font-weight:700; font-size:clamp(40px,5.4vw,74px); line-height:1; letter-spacing:-1.4px; color:var(--cream); }
.champs h2 span{ color:var(--accent); text-shadow:3px 3px 0 #0B1230; }
.champs-lead{ margin:0; font-family:'Fredoka',sans-serif; font-weight:600; font-size:24px; color:#FFD08A; }
.champs-body{ margin:0; font-size:19px; line-height:1.6; color:var(--periwinkle); max-width:560px; }
.perks{ display:flex; flex-direction:column; gap:14px; }
.perks li{ display:flex; gap:14px; align-items:flex-start; font-size:18px; line-height:1.5; color:var(--cream); }
.perks li::before{ content:"✦"; color:var(--accent); font-size:22px; line-height:1.3; }
.crew{ position:relative; height:400px; }
.crew .spark{ color:var(--accent); text-shadow:2px 2px 0 #0B1230; }
.crew-pal{
  position:absolute; width:min(210px,46%); aspect-ratio:1; border-radius:50%; object-fit:cover;
  border:5px solid var(--cream); box-shadow:8px 10px 0 rgba(0,0,0,.35); animation:floaty 5s ease-in-out infinite;
}
.crew-pal.c1{ top:6%; left:4%; --r:-6deg; background:#FFE8D6; }
.crew-pal.c2{ bottom:2%; left:30%; --r:3deg; animation-delay:-1.6s; background:#DFF1E6; width:min(240px,52%); }
.crew-pal.c3{ top:10%; right:2%; --r:7deg; animation-delay:-3.1s; background:#DCEAF8; }

@media (max-width: 980px){
  .showcase{ padding:40px 0 84px; }
  .showcase-inner,
  .showcase.reverse .showcase-inner{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .showcase.reverse .gallery{ order:0; }
  .gallery{ max-width:520px; width:100%; margin:0 auto; }
  .wave{ height:56px; }
  .ticker-track span{ font-size:18px; }
  .champs{ padding:56px 0 84px; }
  .champs-inner{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .crew{ height:320px; max-width:460px; width:100%; margin:0 auto; }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track,.wave svg,.frame,.burst-wrap,.shine::after,.spark,.crew-pal{ animation:none !important; }
  .slide{ transition:none; }
}