/* ==========================================================================
   WOW LAYER — shared animation styles for the PadelBracket landing page.
   Loaded AFTER the page's own <style>; reuses the page :root tokens.
   All motion is gated on html[data-anim] (set by wow.js only when motion
   is allowed). No JS / reduced-motion  ->  everything is visible & static.
   ========================================================================== */

/* ---------- generic scroll-reveal ---------- */
[data-anim] .wow{opacity:0;transform:translateY(28px)}
[data-anim] .wow.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}

/* ==========================================================================
   1 · ANNOTATED SHOT — numbered pins that POP onto the app mock
   ========================================================================== */
.shot-section{max-width:1100px;margin:0 auto;padding:30px 24px 84px}
.shot{position:relative;max-width:780px;margin:0 auto}
.shot .mockup{box-shadow:0 40px 110px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05)}

/* a pin = a numbered dot anchored to a point on the shot, with a flag label */
.pin{position:absolute;z-index:6;width:0;height:0}
.pin-dot{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#0E1114;font-family:'Inter',sans-serif;font-weight:900;font-size:.92rem;
  box-shadow:0 6px 20px rgba(199,255,94,.5),0 0 0 4px rgba(199,255,94,.16);
  z-index:2}
.pin-dot::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);
  opacity:0}
.pin-flag{position:absolute;white-space:nowrap;display:flex;align-items:center;gap:9px;
  background:rgba(26,31,36,.92);backdrop-filter:blur(8px);
  border:1px solid var(--bdr);border-radius:12px;padding:9px 14px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);transform-origin:var(--to,left center)}
.pin-flag b{font-family:'Inter',sans-serif;font-weight:800;font-size:.86rem;color:var(--txt);letter-spacing:-.01em}
.pin-flag span{font-size:.74rem;color:var(--txt2);font-weight:600}
.pin-flag .pf-ic{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:rgba(199,255,94,.14);flex-shrink:0}
.pin-flag .pf-ic svg{width:15px;height:15px;stroke:var(--accent)}
/* connector line from dot to flag */
.pin-line{position:absolute;height:2px;background:linear-gradient(90deg,var(--accent),rgba(199,255,94,.25));
  transform-origin:left center;z-index:1;border-radius:2px}

/* flag placement variants (label sits on a side of the dot) */
.pin--r .pin-flag{left:30px;top:-19px;--to:left center}
.pin--r .pin-line{left:14px;top:-1px;width:18px}
.pin--l .pin-flag{right:30px;top:-19px;--to:right center}
.pin--l .pin-line{right:14px;top:-1px;width:18px}

/* POP choreography */
[data-anim] .pin-dot{transform:scale(0)}
[data-anim] .pin-flag{opacity:0;transform:scale(.6)}
[data-anim] .pin-line{transform:scaleX(0)}
[data-anim] .shot.in .pin-dot{transform:scale(1);transition:transform .5s cubic-bezier(.2,1.6,.4,1);transition-delay:var(--d,0s)}
[data-anim] .shot.in .pin-line{transform:scaleX(1);transition:transform .35s ease;transition-delay:calc(var(--d,0s) + .12s)}
[data-anim] .shot.in .pin-flag{opacity:1;transform:scale(1);transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.5,.4,1);transition-delay:calc(var(--d,0s) + .18s)}
[data-anim] .shot.in .pin-dot::after{animation:pinPing 2.4s ease-out infinite;animation-delay:calc(var(--d,0s) + .5s)}
@keyframes pinPing{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.1);opacity:0}}

@media(max-width:820px){
  .pin{display:none}
  .shot-section{padding-bottom:56px}
}

/* ==========================================================================
   2 · SCROLLYTELLING — sticky phone that swaps screens as steps scroll by
   ========================================================================== */
.story{position:relative;max-width:1100px;margin:0 auto;padding:80px 24px}
.story-grid{display:grid;grid-template-columns:1fr 380px;gap:60px;align-items:start}
.story-steps{display:flex;flex-direction:column}
.story-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0}
.story-step:first-child{min-height:56vh;justify-content:flex-end}
.story-step:last-child{min-height:62vh;justify-content:flex-start}
.ss-num{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;
  background:rgba(199,255,94,.1);border:1px solid rgba(199,255,94,.28);color:var(--accent);
  font-family:'Inter',sans-serif;font-weight:900;font-size:1.15rem;margin-bottom:18px;
  transition:background .4s,transform .4s,box-shadow .4s}
.story-step.active .ss-num{background:var(--accent);color:#0E1114;transform:scale(1.04);box-shadow:0 8px 26px rgba(199,255,94,.4)}
.ss-h{font-family:'Inter',sans-serif;font-weight:800;font-size:clamp(1.5rem,3.2vw,2.1rem);letter-spacing:-.025em;
  line-height:1.12;margin-bottom:12px;opacity:.4;transition:opacity .4s}
.story-step.active .ss-h{opacity:1}
.ss-p{color:var(--txt2);font-size:1rem;line-height:1.6;max-width:400px;opacity:.4;transition:opacity .4s}
.story-step.active .ss-p{opacity:1}

.story-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}

/* phone shell */
.phone{position:relative;width:300px;height:610px;border-radius:46px;background:#06080a;
  padding:11px;box-shadow:0 0 0 2px #2a3036,0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04);flex-shrink:0}
.phone-notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:118px;height:26px;background:#06080a;border-radius:0 0 16px 16px;z-index:10}
.phone-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--bg)}
.scr{position:absolute;inset:0;opacity:0;transform:scale(.98) translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;pointer-events:none}
.scr.active{opacity:1;transform:none}

/* phone progress dots */
.story-dots{display:flex;gap:7px}
.story-dots i{width:7px;height:7px;border-radius:50%;background:var(--surface2);transition:background .3s,width .3s}
.story-dots i.on{background:var(--accent);width:22px;border-radius:4px}

/* ---- in-phone app chrome ---- */
.app-top{display:flex;align-items:center;justify-content:space-between;padding:34px 16px 12px;border-bottom:1px solid var(--bdr)}
.app-top .at-logo{font-family:'Inter',sans-serif;font-weight:900;font-size:.92rem}
.app-top .at-logo em{color:var(--accent);font-style:normal}
.app-chip{font-size:.6rem;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:6px;background:rgba(199,255,94,.14);color:var(--accent)}
.app-body{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.app-h{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--txt2)}

/* screen 1 — names */
.nm-input{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--bdr);border-radius:11px;padding:11px 13px;font-size:.84rem;color:var(--txt2)}
.nm-input .cur{width:2px;height:15px;background:var(--accent);animation:caret 1.1s step-end infinite}
@keyframes caret{50%{opacity:0}}
.nm-chips{display:flex;flex-wrap:wrap;gap:7px}
.nm-chip{display:flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--bdr);border-radius:9px;padding:7px 11px;font-size:.8rem;font-weight:600}
.nm-chip .av{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;color:#0E1114}

/* screen 2 — format picker */
.fmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fmt-card{background:var(--surface);border:1px solid var(--bdr);border-radius:12px;padding:13px;position:relative}
.fmt-card.sel{border-color:var(--accent);background:rgba(199,255,94,.06);box-shadow:0 0 0 1px var(--accent)}
.fmt-card .fc-emoji{font-size:1rem;margin-bottom:7px;display:block;width:28px;height:28px;border-radius:8px;background:var(--surface2);display:flex;align-items:center;justify-content:center}
.fmt-card .fc-emoji svg{width:16px;height:16px}
.fmt-card b{font-size:.82rem;font-weight:800;display:block}
.fmt-card span{font-size:.66rem;color:var(--txt2)}
.fmt-card .fc-check{position:absolute;top:10px;right:10px;width:17px;height:17px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center}
.fmt-card .fc-check svg{width:11px;height:11px;stroke:#0E1114}

/* screen 3 — scoring */
.sc-match{background:var(--surface2);border:1px solid var(--bdr);border-radius:13px;padding:13px}
.sc-court{font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txt2);margin-bottom:9px}
.sc-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0}
.sc-team{font-size:.86rem;font-weight:700}
.sc-val{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.5rem;color:var(--accent);font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
.sc-ctrl{display:flex;align-items:center;gap:7px;margin-top:9px;justify-content:center}
.sc-btn{width:30px;height:30px;border-radius:8px;background:var(--surface);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:1.05rem;color:var(--txt2)}
.sc-btn.plus{background:var(--accent);color:#0E1114;border-color:var(--accent)}
.sc-meta{flex:1;text-align:center;font-size:.66rem;color:var(--txt2)}

/* screen 4 — champion */
.champ{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:18px;text-align:center;position:relative;overflow:hidden}
.champ-cup{width:74px;height:74px;border-radius:22px;background:linear-gradient(150deg,#fde68a,var(--gold));display:flex;align-items:center;justify-content:center;box-shadow:0 16px 40px rgba(251,191,36,.4)}
.champ-cup svg{width:38px;height:38px;stroke:#3a2e05}
.champ-lbl{font-family:'Syne',sans-serif;font-weight:800;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.champ-name{font-family:'Inter',sans-serif;font-weight:900;font-size:1.5rem;letter-spacing:-.02em;line-height:1.05}
.champ-sub{font-size:.76rem;color:var(--txt2)}
.champ-pts{display:inline-flex;align-items:baseline;gap:5px;margin-top:4px;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.28);border-radius:99px;padding:6px 15px}
.champ-pts b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.2rem;color:var(--gold)}
.champ-pts span{font-size:.68rem;color:var(--txt2)}
/* confetti (pure css, only on active champion screen + motion ok) */
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:7px;height:11px;border-radius:1px;opacity:0}
[data-anim] .scr-champ.active .confetti i{animation:confFall 2.6s linear forwards}
@keyframes confFall{0%{opacity:0;transform:translateY(-10px) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(560px) rotate(640deg)}}

@media(max-width:860px){
  .story-grid{grid-template-columns:1fr;gap:0}
  .story-stage{height:auto;top:64px;padding:16px 0 28px;background:linear-gradient(180deg,var(--bg) 70%,transparent);z-index:5;order:-1}
  .story-step{min-height:62vh}
  .story-step:first-child{min-height:30vh}
  .phone{width:248px;height:506px}
}

/* ==========================================================================
   3 · BRACKET — fills round-by-round as the section scrolls through
   ========================================================================== */
.bracket-section{max-width:1100px;margin:0 auto;padding:30px 24px 90px}
.bracket{display:grid;grid-template-columns:repeat(3,1fr) 150px;gap:0 30px;align-items:stretch;position:relative;min-height:360px;margin-top:30px}
.br-col{position:relative;display:flex;flex-direction:column;justify-content:space-around;gap:16px;height:100%}
.br-match{background:var(--surface);border:1px solid var(--bdr);border-radius:11px;overflow:hidden;
  opacity:0;transform:translateX(-14px) scale(.97)}
[data-anim] .br-match{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1)}
.bracket[data-fill="1"] .br-r0,.bracket[data-fill="2"] .br-r0,.bracket[data-fill="3"] .br-r0,.bracket[data-fill="4"] .br-r0{opacity:1;transform:none}
.bracket[data-fill="2"] .br-r1,.bracket[data-fill="3"] .br-r1,.bracket[data-fill="4"] .br-r1{opacity:1;transform:none}
.bracket[data-fill="3"] .br-r2,.bracket[data-fill="4"] .br-r2{opacity:1;transform:none}
.bracket[data-fill="4"] .br-champ{opacity:1;transform:none}
/* when no anim, show everything */
html:not([data-anim]) .br-match,html:not([data-anim]) .br-champ{opacity:1;transform:none}

.br-team{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;gap:10px}
.br-team + .br-team{border-top:1px solid var(--bdr)}
.br-team .bt-name{font-size:.82rem;font-weight:600;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-team .bt-sc{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.05rem;color:var(--txt2);font-variant-numeric:tabular-nums}
.br-team.win .bt-name{color:var(--txt);font-weight:800}
.br-team.win .bt-sc{color:var(--accent)}
.br-team.win{background:rgba(199,255,94,.05)}
.br-col-lbl{position:absolute;top:-26px;left:0;right:0;font-family:'Syne',sans-serif;font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3,rgba(249,250,251,.32));text-align:center}

/* champion card */
.br-champ{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  background:linear-gradient(170deg,rgba(251,191,36,.14),rgba(251,191,36,.04));border:1px solid rgba(251,191,36,.34);
  border-radius:14px;padding:18px 12px;opacity:0;transform:scale(.9)}
[data-anim] .br-champ{transition:opacity .55s ease,transform .55s cubic-bezier(.2,1.5,.4,1)}
.br-champ .bc-cup{width:40px;height:40px;border-radius:12px;background:linear-gradient(150deg,#fde68a,var(--gold));display:flex;align-items:center;justify-content:center}
.br-champ .bc-cup svg{width:22px;height:22px;stroke:#3a2e05}
.br-champ .bc-lbl{font-family:'Syne',sans-serif;font-weight:800;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.br-champ .bc-name{font-family:'Inter',sans-serif;font-weight:900;font-size:.98rem;line-height:1.1;letter-spacing:-.01em}

/* connectors */
.br-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.br-svg path{fill:none;stroke:var(--bdr);stroke-width:1.5}
.br-svg path.lit{stroke:rgba(199,255,94,.5)}
[data-anim] .br-svg path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset .6s ease,stroke .4s ease}
.bracket[data-fill="2"] .br-svg path.c0,.bracket[data-fill="3"] .br-svg path.c0,.bracket[data-fill="4"] .br-svg path.c0{stroke-dashoffset:0}
.bracket[data-fill="3"] .br-svg path.c1,.bracket[data-fill="4"] .br-svg path.c1{stroke-dashoffset:0}
.bracket[data-fill="4"] .br-svg path.c2{stroke-dashoffset:0}

@media(max-width:760px){
  .bracket{grid-template-columns:1fr;gap:10px}
  .br-svg{display:none}
  .br-col{height:auto;gap:10px}
  .br-col-lbl{margin-top:10px}
}

/* ==========================================================================
   4 · MAGNETIC / 3D-TILT  (JS sets --rx --ry --mx --my)
   ========================================================================== */
@media(hover:hover) and (pointer:fine){
  [data-anim] [data-tilt]{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
    transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;will-change:transform}
  [data-anim] [data-tilt].tilting{transition:box-shadow .25s,border-color .25s}
  [data-anim] [data-tilt]::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    opacity:0;transition:opacity .3s;z-index:0;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(199,255,94,.14),transparent 60%)}
  [data-anim] [data-tilt].tilting::after{opacity:1}
}