/* ============================================================
   GRAMY WROCŁAW — ruch „Reżyseria światłem"
   Te same kolory i te same wiązki co na stronie; zmienia się
   tylko to, kiedy i na co świecą.
   ============================================================ */

/* Intro i podświetlone słowo w hero są wpisane w <head> index.html (style#home-intro), bo muszą działać od pierwszej klatki. */

/* ---------- 1. Wiązki na telefonie ---------- */
/* Nagłówki podstron: na telefonie wiązki poruszają się tak jak na stronie głównej. */
@media(max-width:799px) and (prefers-reduced-motion:no-preference),
 (hover:none) and (pointer:coarse) and (prefers-reduced-motion:no-preference){
 .page-hero .hbeam{--beam-range:16deg;animation:mo-beam-sweep 8s ease-in-out infinite}
 .page-hero .hbeam.b1{animation-delay:-2s}
 .page-hero .hbeam.b2{--beam-range:20deg;animation-duration:10s;animation-delay:-6s}
 .page-hero .hbeam.b3{--beam-range:14deg;animation-duration:9s;animation-delay:-3s}
 .page-hero .hbeam.b4{--beam-range:22deg;animation-duration:12s;animation-delay:-8s}
}
@keyframes mo-beam-sweep{
 0%,100%{transform:rotate(calc(-1 * var(--beam-range)))}
 50%{transform:rotate(var(--beam-range))}
}

/* ---------- 3. Strona główna: sekcje rozjaśniane, nie wjeżdżające ---------- */
.mo-home.reveal-ready .rv{transform:none;transition:opacity .7s var(--ease)}
.mo-home .rv-d1{transition-delay:.1s}
.mo-home .rv-d2{transition-delay:.2s}
.mo-home .rv-d3{transition-delay:.3s}

/* Nagłówek sekcji: kreska jak fader, potem tytuł, na końcu odręczny dopisek. */
.mo-home.reveal-ready .sec-head.rv{opacity:1}
.mo-home.reveal-ready .sec-head.rv>*{opacity:0;transition:opacity .6s var(--ease)}
.mo-home.reveal-ready .sec-head.rv .kicker::before{transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease) .05s}
.mo-home.reveal-ready .sec-head.rv .tag{clip-path:inset(-30% 100% -30% -6%);transition:clip-path .6s var(--ease) .45s}
.mo-home.reveal-ready .sec-head.rv.in>*{opacity:1}
.mo-home.reveal-ready .sec-head.rv.in>h2{transition-delay:.1s}
.mo-home.reveal-ready .sec-head.rv.in>p{transition-delay:.22s}
.mo-home.reveal-ready .sec-head.rv.in .kicker::before{transform:scaleX(1)}
.mo-home.reveal-ready .sec-head.rv.in .tag{clip-path:inset(-30% -6% -30% -6%)}

/* Karty: ramka pojawia się pierwsza, zdjęcie dochodzi do pełnej jasności jak na dimmerze. */
.mo-home.reveal-ready .card.rv{transform:translateY(12px);transition:opacity .7s var(--ease),transform .5s var(--ease),border-color .45s,box-shadow .45s}
.mo-home.reveal-ready .card.rv.in{transform:none}
.mo-home .card-img{position:relative}
.mo-home .card-img::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:#0a0a0b;opacity:0;transition:opacity 1.1s var(--ease) .15s}
.mo-home.reveal-ready .card.rv:not(.in) .card-img::before{opacity:.8;transition:none}

/* Follow spot: plama światła idzie za kursorem; na telefonie stoi na środku ekranu. */
.mo-home .card::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,30%),rgba(244,244,245,.15),rgba(165,23,51,.08) 45%,transparent 70%);
  mix-blend-mode:screen;transition:opacity .45s var(--ease);
}
.mo-home .card.is-spot::after{opacity:1}
@media(hover:hover) and (pointer:fine){
  .mo-home .card:hover::after{opacity:1}
  .mo-home.reveal-ready .card.rv.in:hover{transform:translateY(-4px)}
}

/* Etapy współpracy: zapalają się po kolei, 01 → 04. */
.mo-home .process-grid>.process-step:nth-child(1){transition-delay:0s}
.mo-home .process-grid>.process-step:nth-child(2){transition-delay:.12s}
.mo-home .process-grid>.process-step:nth-child(3){transition-delay:.24s}
.mo-home .process-grid>.process-step:nth-child(4){transition-delay:.36s}
.mo-home.reveal-ready .process-step.rv .process-number{opacity:.15;transition:opacity .5s var(--ease)}
.mo-home.reveal-ready .process-step.rv.in .process-number{opacity:1;animation:mo-cue .9s var(--ease) both}
.mo-home.reveal-ready .process-step.rv.in:nth-child(2) .process-number{animation-delay:.12s}
.mo-home.reveal-ready .process-step.rv.in:nth-child(3) .process-number{animation-delay:.24s}
.mo-home.reveal-ready .process-step.rv.in:nth-child(4) .process-number{animation-delay:.36s}
@keyframes mo-cue{0%{text-shadow:0 0 0 rgba(165,23,51,0)}40%{text-shadow:0 0 26px rgba(165,23,51,.95)}100%{text-shadow:0 0 0 rgba(165,23,51,0)}}

/* Liczby: cyfry rozgrzewają się na czas liczenia. */
.mo-home .stats.mo-count .stat b{animation:mo-warm 2.1s var(--ease) both}
.mo-home .stats.mo-count .stat:nth-child(2) b{animation-delay:.12s}
.mo-home .stats.mo-count .stat:nth-child(3) b{animation-delay:.24s}
@keyframes mo-warm{
  0%{text-shadow:0 0 0 rgba(165,23,51,0)}
  35%{text-shadow:0 0 42px rgba(165,23,51,.95),0 0 14px rgba(244,244,245,.3)}
  100%{text-shadow:0 0 0 rgba(165,23,51,0)}
}

/* ---------- 4. Podstrony: prawdziwy sprzęt pod reflektorem ---------- */
.spot-box{display:block;isolation:isolate}
.spot-rig{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.spot-beam{
  position:absolute;top:-6%;left:var(--x,50%);width:46%;height:118%;margin-left:-23%;
  transform-origin:50% 0;opacity:var(--o,.9);
  background:conic-gradient(from 171deg at 50% 0,transparent 0deg,var(--beam) 5deg,var(--beam) 13deg,transparent 18deg);
  -webkit-mask-image:linear-gradient(to bottom,#000 8%,rgba(0,0,0,.5) 62%,transparent 97%);
  mask-image:linear-gradient(to bottom,#000 8%,rgba(0,0,0,.5) 62%,transparent 97%);
  transition:opacity .9s var(--ease);
  animation:mo-spot-sway var(--dur,9s) ease-in-out var(--delay,0s) infinite;
}
.spot-beam.s1{--x:16%;--rest:-9deg;--range:6deg;--dur:10s;--delay:-3s;--beam:rgba(165,23,51,.42)}
.spot-beam.s2{--x:50%;--rest:0deg;--range:8deg;--dur:8s;--delay:-1s;--beam:rgba(244,244,245,.26)}
.spot-beam.s3{--x:84%;--rest:9deg;--range:6deg;--dur:11s;--delay:-6s;--beam:rgba(165,23,51,.42)}
.spot-beam[data-word-aim]{transform:rotate(var(--hero-beam-angle))!important}
@keyframes mo-spot-sway{
  0%,100%{transform:rotate(calc(var(--rest,0deg) - var(--range,7deg)))}
  50%{transform:rotate(calc(var(--rest,0deg) + var(--range,7deg)))}
}
.reveal-ready .spot-box.rv:not(.in) .spot-beam{opacity:0}

.spot-items{position:absolute;inset:10% 7% 19%;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:5%}
.spot-item{position:relative;flex:var(--f,1) 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center}
.spot-item img{
  position:relative;z-index:1;width:auto;height:auto;max-width:100%;max-height:100%;
  filter:brightness(.84) saturate(.92);transition:filter .7s var(--ease);
}
/* Cień kontaktowy i plama światła na „podłodze". */
.spot-item::before,.spot-item::after{content:"";position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}
.spot-item::before{bottom:-4%;width:86%;height:9%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.7),transparent 72%)}
.spot-item::after{bottom:-9%;width:150%;height:20%;background:radial-gradient(50% 50% at 50% 50%,rgba(244,244,245,.2),rgba(165,23,51,.1) 45%,transparent 72%);opacity:.2;transition:opacity .7s var(--ease)}
/* Szerokie urządzenia (konsolety): dwa w górnym rzędzie, trzecie pod nimi. */
.spot-items--stack{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10% 7%;inset:9% 8% 21%}
.spot-items--stack .spot-item{min-height:0}
.spot-items--stack .spot-item:nth-child(3){grid-column:1/-1;justify-self:center;width:46%}
/* Dwa szerokie elementy (podesty, kratownice): jeden pod drugim, po przekątnej. */
.spot-items--rows{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:9% 0;inset:8% 8% 20%}
.spot-items--rows .spot-item{min-height:0;width:64%}
.spot-items--rows .spot-item:nth-child(1){justify-self:start}
.spot-items--rows .spot-item:nth-child(2){justify-self:end}
/* Pięć elementów (kratownice): dwa szerokie u góry, trzy mniejsze pod nimi. */
.spot-items--five{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr;gap:9% 4%;inset:7% 6% 24%}
.spot-items--five .spot-item{min-height:0;grid-column:span 2}
.spot-items--five .spot-item:nth-child(-n+2){grid-column:span 3}
.reveal-ready .spot-box.rv:not(.in) .spot-item img{filter:brightness(.16) saturate(.4)}
.spot-box.is-aiming .spot-item:not(.is-lit) img{filter:brightness(.5) saturate(.7)}
.spot-item.is-lit img{filter:brightness(1.1) saturate(1.02)}
.spot-item.is-lit::after{opacity:1}

.spot-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.1rem;
  padding:.7rem 1rem .8rem;font-size:.64rem;font-weight:700;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--silver2);
}
.spot-cap span{display:inline-flex;align-items:center;gap:.5em;transition:color .4s var(--ease)}
.spot-cap span::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#3a3d45;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.spot-cap span.is-lit{color:var(--white)}
.spot-cap span.is-lit::before{background:var(--bordo2);box-shadow:0 0 10px var(--bordo-glow)}
/* Wariant ze zdjęciem realizacji: całość przygaszona, a krąg światła idzie tam, gdzie celują wiązki. */
@property --lx{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --ly{syntax:'<percentage>';inherits:false;initial-value:45%}
@property --lr{syntax:'<percentage>';inherits:false;initial-value:0%}
.spot-photo,.spot-shade{position:absolute;inset:0}
.spot-photo img{width:100%;height:100%;object-fit:cover}
.spot-shade{
  background-color:rgba(10,10,11,.62);
  -webkit-mask-image:radial-gradient(circle at var(--lx) var(--ly),transparent 0,rgba(0,0,0,.4) calc(var(--lr) * .55),#000 var(--lr));
  mask-image:radial-gradient(circle at var(--lx) var(--ly),transparent 0,rgba(0,0,0,.4) calc(var(--lr) * .55),#000 var(--lr));
  transition:--lx .45s var(--ease),--ly .45s var(--ease),--lr .55s var(--ease),background-color .9s var(--ease);
}
.reveal-ready .spot-box--photo.rv:not(.in) .spot-shade{background-color:rgba(10,10,11,.94)}
.spot-items--points{inset:0;display:block}
.spot-point{position:absolute;left:var(--px);top:var(--py);display:block;width:2px;height:2px;margin:-1px}
.spot-point::before{display:none}
.spot-point::after{
  left:50%;top:50%;bottom:auto;width:10px;height:10px;margin:-5px;border-radius:50%;transform:none;
  background:var(--bordo2);box-shadow:0 0 0 4px rgba(165,23,51,.28),0 0 18px var(--bordo-glow);opacity:0;
}
.spot-box--photo .spot-cap{padding-top:1.8rem;background:linear-gradient(transparent,rgba(10,10,11,.88) 60%)}
.spot-box--photo .spot-cap span{cursor:default;color:var(--silver)}
.spot-box--photo .spot-cap span.is-lit{color:var(--white)}
@media(max-width:520px){.spot-cap{font-size:.56rem;letter-spacing:.1em;gap:.2rem .8rem}.spot-items{inset:9% 6% 22%}}

@media(prefers-reduced-motion:reduce){
  .spot-beam{animation:none;transform:rotate(var(--rest,0deg))}
  .spot-item img{filter:none}
  .spot-shade{background-color:rgba(10,10,11,.25)}
  .mo-home .card::after{display:none}
}