/* worksheet-v1/_core/_css/promo-slider.css
   Promo slider banner — shared by index.php and platform.php via
   lib/promo-slider-render.php. Visually validated in
   test/promo-slider-prototype.html (30/08/2026) before this file existed;
   only two things changed going from prototype to production:
   1. left/right/margin-left → the CSS logical equivalents
      (inset-inline-start/end, padding-inline, etc.) so Stella and the text
      column mirror correctly under dir="rtl" with no separate RTL rules.
   2. Colors reference the host page's own --ink/--red/--gold/... variables
      (both index.php and platform.php already define the same palette)
      instead of redeclaring them here.
*/
.promo-slider{position:relative;border-radius:22px;overflow:hidden;
  box-shadow:0 16px 40px -14px rgba(59,47,34,.35);
  height:clamp(190px, 30vw, 400px);background:#000;margin-bottom:18px;}
.ps-track{position:absolute;inset:0;}
.ps-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease;
  display:flex;align-items:center;overflow:hidden;}
.ps-slide.active{opacity:1;visibility:visible;z-index:2;}
.ps-bg{position:absolute;inset:-6%;background-size:cover;background-position:center;
  transition:transform .25s ease-out;will-change:transform;}
.ps-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ps-content{position:relative;z-index:3;padding-inline:6%;max-width:min(560px, 54%);
  transition:transform .25s ease-out;will-change:transform;}
.ps-eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);
  backdrop-filter:blur(4px);color:#fff;font-weight:800;font-size:clamp(.6rem, 1.6vw, .72rem);letter-spacing:.06em;
  text-transform:uppercase;padding:5px 14px;border-radius:999px;margin-bottom:clamp(6px, 1.6vw, 14px);white-space:nowrap;}
.ps-title{font-size:clamp(1.05rem, 4.2vw, 2.1rem);font-weight:900;color:#fff;line-height:1.15;margin:0 0 10px;
  text-shadow:0 3px 14px rgba(0,0,0,.35);}
.ps-sub{font-size:clamp(.74rem, 1.8vw, 1rem);color:rgba(255,255,255,.92);line-height:1.5;margin:0 0 clamp(10px, 2.4vw, 22px);
  max-width:420px;text-shadow:0 2px 8px rgba(0,0,0,.3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.ps-slide.active .ps-eyebrow{animation:ps-rise .6s .05s both ease-out;}
.ps-slide.active .ps-title{animation:ps-rise .6s .15s both ease-out;}
.ps-slide.active .ps-sub{animation:ps-rise .6s .25s both ease-out;}
.ps-slide.active .ps-cta{animation:ps-rise .6s .35s both ease-out;}
@keyframes ps-rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}

.ps-cta{position:relative;display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;
  background:linear-gradient(180deg,#e0824c,var(--red));color:#fff;font-weight:800;font-size:clamp(.78rem, 1.8vw, 1rem);
  padding:clamp(10px, 2vw, 15px) clamp(16px, 3.5vw, 30px);border-radius:14px;font-family:inherit;white-space:nowrap;
  text-decoration:none;box-shadow:0 6px 0 #8a2f2f, 0 14px 26px -8px rgba(0,0,0,.5);
  transform:translateY(0);transition:transform .12s ease, box-shadow .12s ease;}
.ps-cta:hover{transform:translateY(-2px);box-shadow:0 8px 0 #8a2f2f, 0 18px 30px -8px rgba(0,0,0,.55);}
.ps-cta:active{transform:translateY(4px);box-shadow:0 2px 0 #8a2f2f, 0 6px 14px -6px rgba(0,0,0,.5);}
.ps-cta .arrow{display:inline-block;transition:transform .2s ease;}
.ps-cta:hover .arrow{transform:translateX(4px);}
[dir="rtl"] .ps-cta:hover .arrow{transform:translateX(-4px);}

/* Stella — WRAPPER (idle float, transform) holds an inner <img> (parallax,
   also transform, JS-driven inline style) so the CSS animation and the JS
   parallax never fight over the same property. side-end/side-start (not
   left/right) so she mirrors sides automatically under dir="rtl". */
.ps-stella-wrap{position:absolute;bottom:var(--stella-y);z-index:3;height:var(--stella-h);
  transition:height .15s ease, bottom .15s ease, inset-inline .15s ease;pointer-events:none;}
.ps-stella-wrap.side-end{inset-inline-end:var(--stella-x);}
.ps-stella-wrap.side-start{inset-inline-start:var(--stella-x);}
.ps-stella-wrap.ps-stella-idle{animation:ps-float 3.6s ease-in-out infinite;}
@keyframes ps-float{0%,100%{transform:translateY(0) rotate(-1.4deg);}50%{transform:translateY(-16px) rotate(1.4deg);}}
.ps-stella{position:relative;height:100%;display:block;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.35));
  transition:transform .18s ease-out;will-change:transform;}
.ps-slide.active .ps-stella-wrap{animation-name:ps-stella-in, ps-float;animation-duration:.7s, 3.6s;
  animation-delay:.1s, .7s;animation-timing-function:cubic-bezier(.2,.9,.3,1.3), ease-in-out;
  animation-iteration-count:1, infinite;animation-fill-mode:both, none;}
@keyframes ps-stella-in{from{opacity:0;transform:translateY(40px) scale(.92);}to{opacity:1;transform:translateY(0) scale(1);}}

.ps-stella-halo{position:absolute;inset-inline-start:50%;bottom:4%;transform:translateX(-50%) scale(.92);
  width:82%;aspect-ratio:1/1;border-radius:50%;filter:blur(3px);
  background:radial-gradient(circle, rgba(255,255,255,.4) 0%, rgba(255,255,255,.14) 45%, rgba(255,255,255,0) 72%);
  animation:ps-halo-pulse 3.6s ease-in-out infinite;}
@keyframes ps-halo-pulse{0%,100%{transform:translateX(-50%) scale(.9);opacity:.65;}50%{transform:translateX(-50%) scale(1.1);opacity:1;}}

.ps-greet-word{position:absolute;bottom:84%;inset-inline-start:50%;background:rgba(255,255,255,.94);color:var(--ink);
  font-weight:800;font-size:.8rem;padding:6px 14px;border-radius:999px;white-space:nowrap;
  box-shadow:0 4px 12px -3px rgba(0,0,0,.3);opacity:0;
  animation:ps-greet-float 10s ease-in-out infinite;}
.ps-greet-logo img{height:16px;display:block;}
@keyframes ps-greet-float{
  0%{opacity:0;transform:translate(-50%,6px) scale(.7);}
  4%{opacity:1;transform:translate(calc(-50% + var(--gx,0px)),-10px) scale(1);}
  16%{opacity:1;transform:translate(calc(-50% + var(--gx,0px)),-22px) scale(1);}
  20%{opacity:0;transform:translate(calc(-50% + var(--gx,0px) * 1.4),-34px) scale(.85);}
  100%{opacity:0;}
}

.ps-badge{position:absolute;top:clamp(10px, 2.4vw, 22px);inset-inline-end:clamp(10px, 2.4vw, 24px);z-index:4;
  background:rgba(255,255,255,.95);color:var(--red);font-weight:800;font-size:clamp(.62rem, 1.4vw, .78rem);
  padding:clamp(5px, 1vw, 8px) clamp(10px, 2vw, 16px);border-radius:999px;box-shadow:0 6px 14px -4px rgba(0,0,0,.3);
  display:flex;align-items:center;gap:6px;white-space:nowrap;}

.ps-fireflies{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;}
.ps-firefly{position:absolute;bottom:-6%;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle,#fffef2 0%,#fff3b0 40%,rgba(255,231,140,.5) 70%,rgba(255,231,140,0) 100%);
  box-shadow:0 0 12px 4px rgba(255,224,130,.75), 0 0 22px 8px rgba(255,224,130,.35);
  animation:ps-firefly-drift linear infinite, ps-firefly-twinkle ease-in-out infinite;}
@keyframes ps-firefly-drift{from{transform:translate(0,0);}to{transform:translate(var(--fx,20px),-130%);}}
@keyframes ps-firefly-twinkle{0%,100%{opacity:.45;}50%{opacity:1;}}

.ps-dots{position:absolute;bottom:18px;inset-inline-start:50%;transform:translateX(-50%);z-index:5;display:flex;gap:8px;}
.ps-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;
  padding:0;transition:background .2s,transform .2s;}
.ps-dot.active{background:#fff;transform:scale(1.3);}

.ps-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;
  border:none;background:rgba(255,255,255,.16);backdrop-filter:blur(3px);color:#fff;font-size:1.2rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.ps-arrow:hover{background:rgba(255,255,255,.32);}
.ps-arrow.prev{inset-inline-start:16px;} .ps-arrow.next{inset-inline-end:16px;}

/* Kept LAST on purpose — same specificity as the base rules above, so
   source order is what makes these win below their breakpoint (placing
   responsive rules earlier in the file silently loses to later base rules:
   the exact bug hit once in the prototype, 30/08/2026). */
@media (max-width: 640px){
  .ps-content{max-width:68%;padding-inline-start:52px;padding-inline-end:6%;}
  .ps-stella-wrap{height:calc(var(--stella-h) * 0.55);opacity:.85;z-index:1;}
  .ps-sub{-webkit-line-clamp:2;}
  .ps-arrow{width:32px;height:32px;font-size:1rem;}
  .ps-arrow.prev{inset-inline-start:8px;} .ps-arrow.next{inset-inline-end:8px;}
  .ps-dots{bottom:10px;}
}
@media (max-width: 420px){
  .ps-content{max-width:100%;}
  .ps-stella-wrap{display:none;}
}