/* «Играйте с часами» — Padelada 2.0 (Apple Watch). Follows the site theme like every section (Мурат 23.10): --w-* map to the page tokens.
   Equal cards: one-line titles, the text box is three lines tall in every language (checked 320–1440). */
#reloj{--w-bg:var(--bg);--w-surface:var(--surface);--w-surface-2:var(--sunk);--w-border:color-mix(in srgb,var(--ink) 16%,transparent);--w-text:var(--ink);--w-muted:var(--muted);--w-accent:var(--accent);--w-cta:#FF5E5B;--w-ease:cubic-bezier(.25,.1,.25,1);--w-spring:cubic-bezier(.2,.8,.2,1)}
#reloj.w11{gap:56px;padding:120px 24px 112px;color:var(--w-text)}
#reloj .copy{gap:16px;max-width:820px}
#reloj .kicker{font-weight:600;font-size:13px;letter-spacing:.12em}
#reloj h2{font-weight:400;font-size:var(--story-h2);letter-spacing:-.035em;line-height:1.08;color:var(--w-text)}
#reloj .sub{font-weight:400;font-size:clamp(17px,1.35vw,21px);line-height:1.45;letter-spacing:-.011em;color:var(--w-muted);max-width:34em;text-wrap:pretty}

/* video slot (16:9). Poster = real screens; no fake player controls. */
.w11-video{position:relative;margin:0;width:min(1080px,100%);aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:radial-gradient(60% 70% at 50% 108%,rgba(255,181,71,.16),transparent 70%),radial-gradient(40% 50% at 18% 30%,rgba(61,219,176,.07),transparent 70%),var(--w-surface);box-shadow:inset 0 0 0 1px var(--w-border)}
.w11-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5.5%;padding-bottom:3%}
.w11-poster .watch{width:17.5%;max-width:none}
.w11-poster .phone{width:20.5%;transform:translateY(13%)}
.w11-poster .phone .screen{background:#FFF1EA}
.w11-poster .device{transition:transform 1.2s var(--w-spring)}

/* cards */
.w11-rail{width:min(1080px,100%)}
.w11-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;grid-auto-rows:1fr}
.w11-cards:focus-visible{outline:2px solid var(--w-accent);outline-offset:6px;border-radius:30px}
.w11-card{display:flex;flex-direction:column;min-width:0;background:var(--w-surface);border-radius:28px;overflow:hidden;text-align:left;box-shadow:inset 0 0 0 1px var(--w-border);transition:transform .5s var(--w-spring),box-shadow .5s var(--w-ease),background-color .5s var(--w-ease);-webkit-tap-highlight-color:transparent}
.w11-stage{position:relative;height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(55% 60% at 50% 52%,rgba(255,181,71,.09),transparent 72%)}
.w11-stage .device{transition:transform .8s var(--w-spring)}
.w11-stage .watch{width:196px;max-width:none}
.w11-stage .watch .screen img{object-fit:cover;object-position:center}
.w11-stage.is-phone{align-items:flex-start}
.w11-stage .phone{width:188px;margin-top:30px}
.w11-stage .phone::before{box-shadow:none}
.w11-stage .phone .screen{background:#FFF1EA}
.w11-text{padding:22px 28px 30px;display:flex;flex-direction:column;gap:8px}
.w11-card h3{margin:0;font-family:'Golos Text',sans-serif;font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.018em;color:var(--w-text);white-space:nowrap}
.w11-card p{margin:0;font-size:16px;line-height:1.45;font-weight:400;letter-spacing:-.006em;color:var(--w-muted);min-height:calc(1.45em * 4);text-wrap:pretty}
@media(hover:hover){
 .w11-card:hover{transform:translateY(-6px)}
 .w11-card:hover .device{transform:scale(1.045)}
 .w11-video:hover .w11-poster .watch{transform:translateY(-2%)}
 .w11-video:hover .w11-poster .phone{transform:translateY(10%)}
}
.w11-card:active{transform:scale(.985);transition-duration:.18s}

/* carousel controls (phones only) */
.w11-nav{display:none;justify-content:flex-end;gap:10px;margin-top:18px}
.w11-nav button{width:40px;height:40px;border-radius:50%;border:0;padding:0;display:flex;align-items:center;justify-content:center;background:var(--w-surface-2);color:var(--w-text);cursor:pointer;transition:background-color .25s var(--w-ease),opacity .25s var(--w-ease),transform .15s var(--w-ease)}
.w11-nav button svg{width:20px;height:20px}
.w11-nav button:hover{background:color-mix(in srgb,var(--ink) 18%,var(--sunk))}
.w11-nav button:disabled{opacity:.35;cursor:default}
.w11-nav button:focus-visible{outline:2px solid var(--w-accent);outline-offset:3px}

/* staggered reveal of the cards inside the revealed rail */
.motion-ready .w11-rail.r{transform:none}
.motion-ready .w11-rail .w11-card{opacity:0;transform:translateY(28px);transition:opacity .9s var(--w-ease),transform .9s var(--w-spring),box-shadow .5s var(--w-ease),background-color .5s var(--w-ease)}
.motion-ready .w11-rail.in .w11-card{opacity:1;transform:none}
.motion-ready .w11-rail.in .w11-card:nth-child(2){transition-delay:.08s,.08s,0s,0s}
.motion-ready .w11-rail.in .w11-card:nth-child(3){transition-delay:.16s,.16s,0s,0s}
.motion-ready .w11-rail.in .w11-card:nth-child(4){transition-delay:.24s,.24s,0s,0s}
.motion-ready .w11-rail.in .w11-card:nth-child(5){transition-delay:.32s,.32s,0s,0s}
.motion-ready .w11-rail.in .w11-card:nth-child(6){transition-delay:.4s,.4s,0s,0s}
@media(hover:hover){.motion-ready .w11-rail.in .w11-card:hover{transform:translateY(-6px);transition-delay:0s}}
.motion-ready .w11-rail.in .w11-card:active{transform:scale(.985);transition-delay:0s}

@media(max-width:1023px){
 .w11-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .w11-stage{height:290px}
}
@media(max-width:699px){
 #reloj.w11{gap:36px;padding:72px 20px 72px}
 .w11-video{border-radius:20px}
 .w11-rail{width:calc(100% + 40px);margin-inline:-20px}
 .w11-cards{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(80vw,320px);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:4px 20px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .w11-cards::-webkit-scrollbar{display:none}
 .w11-card{scroll-snap-align:start}
 .w11-stage{height:270px}
 .w11-stage .watch{width:178px}
 .w11-stage .phone{width:172px;margin-top:26px}
 .w11-text{padding:20px 22px 26px}
 .w11-card h3{font-size:19px}
 .w11-card p{font-size:15px}
 .w11-nav{display:flex;padding-inline:20px}
}
@media(prefers-reduced-motion:reduce){
 .w11-card,.w11-stage .device,.w11-poster .device,.w11-nav button{transition:none}
 .motion-ready .w11-rail .w11-card,.motion-ready .w11-rail.in .w11-card{opacity:1;transform:none;transition:none}
 .w11-card:hover,.w11-card:active,.w11-card:hover .device{transform:none}
 .w11-cards{scroll-behavior:auto}
}
#reloj .w11-alias{position:absolute;top:0}#reloj{position:relative}
/* ≤359px: «Грайте з годинником» (uk) fits one line; card titles («Коліщатко назад — 0:0») stay inside the card. */
@media(max-width:359px){#reloj h2{font-size:26px}.w11-card h3{font-size:18px}}
/* Devices stand right on the page, like the iPhones in #torneo-padelada / #formatos (Мурат 23.10): no card fill, no frame,
   no glow behind the picture, the whole device is visible (no crop/fade). Caption = plain text under the device. */
.w11-card,.motion-ready .w11-rail .w11-card{background:none;box-shadow:none;border-radius:0;overflow:visible;text-align:center}
.w11-stage{height:330px;overflow:visible;background:none;align-items:center}
.w11-stage.is-phone{align-items:center}
.w11-stage .watch{width:196px;-webkit-mask-image:none;mask-image:none}
.w11-stage .phone{width:158px;margin-top:0;-webkit-mask-image:none;mask-image:none}
.w11-text{padding:18px 8px 8px;align-items:center}
.w11-card p{max-width:20em}
@media(hover:hover){.w11-card:hover{background:none;box-shadow:none}}
@media(max-width:1023px){.w11-stage{height:320px}}
@media(max-width:699px){
 .w11-stage{height:300px}
 .w11-stage .watch{width:184px}
 .w11-stage .phone{width:146px;margin-top:0}
 .w11-text{padding:16px 6px 6px}
}