/* ==================================================================
   WRIST AFICIONADO 2.0 — LIQUID GLASS
   Web approximation of Apple-style "liquid glass": frosted
   backdrop-blur surfaces, layered white edge-highlights, soft
   depth shadows, specular sheen. Applied across the whole UI.
   (Not Apple's official Liquid Glass — a CSS glassmorphism build.)
   $aviv666k · Argentina
   ================================================================== */
:root{
  --glass-fill:   linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.028));
  --glass-fill-2: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  --glass-edge:   rgba(255,255,255,.18);
  --glass-blur:   blur(20px) saturate(155%);
  --glass-blur-lg:blur(34px) saturate(160%);
  --glass-inner:  inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.02);
  --glass-drop:   0 20px 50px rgba(0,0,0,.5);
  --glass-r:      18px;
}

/* specular sheen used on glass surfaces */
.gl-sheen::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:radial-gradient(135% 100% at 16% -10%, rgba(255,255,255,.34), rgba(255,255,255,.05) 42%, transparent 62%); }

/* ── header → floating glass bar ── */
.header{ background:linear-gradient(180deg, rgba(22,22,28,.5), rgba(10,10,14,.28));
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-bottom:1px solid rgba(255,255,255,.09); box-shadow:0 10px 34px rgba(0,0,0,.34); }

/* ── buttons → liquid glass ── */
.btn{ position:relative; overflow:hidden; background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge); box-shadow:var(--glass-inner), 0 8px 24px rgba(0,0,0,.35); color:var(--ink);
  border-radius:100px; }
.btn::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 100% at 22% -20%, rgba(255,255,255,.4), transparent 46%); }
.btn:hover{ border-color:rgba(255,255,255,.34); box-shadow:var(--glass-inner), 0 12px 30px rgba(0,0,0,.42); transform:translateY(-2px); }
.btn--solid{ background:linear-gradient(135deg, rgba(233,205,142,.92), rgba(198,161,91,.72));
  color:#171105; border-color:rgba(255,238,196,.55); }
.btn--solid:hover{ background:linear-gradient(135deg, rgba(243,220,166,.98), rgba(214,180,110,.82)); color:#171105; }
.btn--mini{ border-radius:100px; }

/* ── collection: watches on liquid-glass tiles ── */
.card__art{ position:relative; overflow:hidden; border-radius:var(--glass-r);
  background:var(--glass-fill-2); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge); box-shadow:var(--glass-inner), var(--glass-drop); }
.card__art::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:radial-gradient(135% 95% at 14% -8%, rgba(255,255,255,.26), rgba(255,255,255,.04) 44%, transparent 60%); }
.card__photo{ filter:none !important; }
.card:hover .card__art{ border-color:rgba(255,255,255,.3); box-shadow:var(--glass-inner), 0 30px 64px rgba(0,0,0,.55); }
.card__badge{ z-index:3; padding:6px 12px; border-radius:100px; color:var(--ink);
  background:var(--glass-fill); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge); box-shadow:var(--glass-inner); font-size:9.5px; letter-spacing:2px; }
.card__view{ background:var(--glass-fill); -webkit-backdrop-filter:var(--glass-blur-lg); backdrop-filter:var(--glass-blur-lg);
  border:1px solid var(--glass-edge); box-shadow:var(--glass-inner), 0 10px 30px rgba(0,0,0,.4); }

/* ── feature spec sheet → glass panel ── */
.feature .specs{ position:relative; padding:8px clamp(18px,3vw,30px); border-radius:var(--glass-r);
  background:var(--glass-fill-2); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.12); box-shadow:var(--glass-inner), 0 16px 44px rgba(0,0,0,.4); }
.feature .specs li{ border-top-color:rgba(255,255,255,.10); }

/* ── exploded-view legend → glass card ── */
.legend{ padding:16px 18px; border-radius:var(--glass-r);
  background:var(--glass-fill-2); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge); box-shadow:var(--glass-inner), var(--glass-drop); }

/* ── loader → glass slab ── */
.loader__inner{ position:relative; padding:40px 44px; border-radius:22px;
  background:var(--glass-fill-2); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge); box-shadow:var(--glass-inner), var(--glass-drop); }

/* ── scroll hint + progress → glass ── */
.stage__hint span{ padding:6px 14px; border-radius:100px; background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-edge); box-shadow:var(--glass-inner); }
.stage__progress{ background:rgba(255,255,255,.08); border-radius:100px; padding:1px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* ── 3D viewer modal → glass ── */
.viewer{ background:radial-gradient(120% 100% at 50% 38%, rgba(24,24,30,.72), rgba(8,8,12,.72));
  -webkit-backdrop-filter:var(--glass-blur-lg); backdrop-filter:var(--glass-blur-lg); }
.viewer__close, .gallery__close, .gallery__nav{ background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-edge); box-shadow:var(--glass-inner), 0 8px 22px rgba(0,0,0,.4); }
.viewer__close:hover, .gallery__close:hover, .gallery__nav:hover{ background:linear-gradient(135deg, rgba(233,205,142,.9), rgba(198,161,91,.7)); color:#171105; border-color:rgba(255,238,196,.55); }
.viewer__info, .gallery__info{ padding:16px 20px; border-radius:var(--glass-r);
  background:var(--glass-fill-2); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.12); box-shadow:var(--glass-inner), 0 14px 40px rgba(0,0,0,.42); }

/* ── gallery modal → glass ── */
.gallery{ background:rgba(6,6,9,.6); -webkit-backdrop-filter:var(--glass-blur-lg); backdrop-filter:var(--glass-blur-lg); }
.gallery__media{ border:1px solid rgba(255,255,255,.12); box-shadow:var(--glass-inner), 0 30px 80px rgba(0,0,0,.6); }
.gallery__dot{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }

/* ── enquire seal glow ── */
.outro__seal{ filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(255,255,255,.08)); }

/* ── footer → subtle glass top edge ── */
.footer{ border-top:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(16,16,20,.5), rgba(8,8,11,.7));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }

/* accessibility: solid fallback when transparency is reduced */
@media (prefers-reduced-transparency: reduce){
  .header,.btn,.card__art,.card__badge,.card__view,.feature .specs,.legend,.loader__inner,
  .viewer,.viewer__close,.viewer__info,.gallery,.gallery__close,.gallery__nav,.gallery__info,.footer{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    background:rgba(16,16,20,.96) !important;
  }
  .btn--solid{ background:var(--accent-2) !important; }
}

/* ══════════════════════════════════════════════════════════════
   2.1 — PREMIUM PASS: luminous glass, cursor spotlight, 3D tilt,
   specular sweep, generous rhythm, gold hairlines. (Emil-grade polish)
   ══════════════════════════════════════════════════════════════ */
:root{ --spring:cubic-bezier(.34,1.3,.5,1); --ease-o:cubic-bezier(.16,1,.3,1); }

/* collection: more air + presence */
.collection{ padding:clamp(96px,13vw,170px) clamp(20px,5vw,72px); }
.grid{ gap:clamp(46px,5.5vw,90px) clamp(30px,3.5vw,58px); }
.card__art{ aspect-ratio:4/5; border-radius:22px; transform-style:preserve-3d;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease-o), box-shadow .5s var(--ease-o), border-color .5s;
  background:linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 55%, rgba(255,255,255,.06));
  will-change:transform; }
.card__photo{ transition:transform .6s var(--ease-o); transform:translateZ(30px) scale(1.0); }
.card:hover .card__photo{ transform:translateZ(46px) scale(1.06); }
.card:hover .card__art{ box-shadow:var(--glass-inner), 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); border-color:rgba(255,255,255,.32); }

/* cursor spotlight (Emil / spotlight-border-card) */
.card__art::after{ content:""; display:block !important; position:absolute; inset:0; border-radius:inherit; z-index:3; pointer-events:none;
  opacity:0; transition:opacity .45s var(--ease-o);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.20), rgba(255,255,255,.05) 40%, transparent 62%); }
.card__art:hover::after{ opacity:1; }
/* specular sweep on hover */
.card__art::before{ background:
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 48%, transparent 56%) var(--sweep,-120%) 0 / 250% 100% no-repeat,
    radial-gradient(135% 95% at 14% -8%, rgba(255,255,255,.24), rgba(255,255,255,.03) 46%, transparent 62%);
  transition:background-position .8s var(--ease-o); }
.card:hover .card__art::before{ --sweep:120%; }

/* elegant labels */
.card__badge{ top:14px; left:14px; padding:6px 13px; font-size:9px; letter-spacing:2.5px; color:var(--accent-2); }
.card__marque{ color:#8a8b92; letter-spacing:3.5px; font-size:10.5px; }
.card__name{ font-size:clamp(22px,2.5vw,28px); margin-top:4px; }
.card__foot{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.09); }

/* buttons: cursor spotlight + spring */
.btn{ transition:transform .4s var(--spring), box-shadow .4s var(--ease-o), border-color .4s; }
.btn::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .4s;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 60%); }
.btn:hover::after{ opacity:1; }

/* gold hairline accent under section titles */
.feature__title,.collection__title,.outro__title{ position:relative; }
.collection__head{ position:relative; padding-bottom:26px; }
.collection__head::after{ content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:52px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent); }

/* section rhythm + luxe grade */
.feature{ padding-top:clamp(110px,15vw,180px); }
.feature__lede,.collection__lede{ max-width:60ch; }
body{ background:radial-gradient(140% 100% at 50% 0%, #0d0d12 0%, #070708 55%, #050506 100%); }

/* refined header sizing */
.header{ padding-top:20px; padding-bottom:20px; }

@media (max-width:760px){
  .card__art{ aspect-ratio:4/5; }
  .grid{ gap:44px 24px; }
}
@media (prefers-reduced-motion:reduce){
  .card__art{ transform:none !important; }
  .card__photo{ transform:none !important; }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM LOADER — "The Winding"
   Bespoke watchmaking intro: a dial that winds on load.
   No glass card, no progress bar, no "%": pure black + gold arc.
   ═══════════════════════════════════════════════════════════ */
@property --p{ syntax:"<number>"; inherits:true; initial-value:0; }

.loader{ --p:0; background:#060607;
  transition:opacity 1s var(--ease), visibility 1s var(--ease); }
/* filmic depth — faint gold bloom + vignette, no container */
.loader::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 44% at 50% 43%, rgba(198,161,91,.10), transparent 62%),
    radial-gradient(125% 95% at 50% 50%, transparent 52%, rgba(0,0,0,.62) 100%); }

.loader__inner{ position:relative; width:auto; padding:0;
  background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border:0 !important; box-shadow:none !important;
  display:flex; flex-direction:column; align-items:center;
  transition:transform 1s var(--ease); }

/* ── reconstructed logo dial — proportions matched to the original ──
   (relative to outer-ring radius: inner ring .686 · romans .837 · WA ½w .556 ½h .244) */
.loader__dial{ position:relative; width:224px; height:224px; display:grid; place-items:center; }
/* chrome rings (matching the original two-circle logo) */
.loader__ring{ position:absolute; border-radius:50%;
  background:linear-gradient(155deg, #ffffff, #9aa0a8 42%, #eef1f4 52%, #6f747c 78%, #cfd3d8);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); opacity:0; animation:waFade .7s ease .1s forwards; }
.loader__ring--out{ width:224px; height:224px; }          /* radius 112 */
.loader__ring--in{ width:154px; height:154px; }           /* radius 77 = 112 × .686 */

/* ── the exact roman numerals of the logo, winding in clockwise (tangential); XII loads last ── */
.loader__romans{ position:absolute; inset:0; }
.loader__romans b{ --step:.34s; position:absolute; top:50%; left:50%;
  font-family:"Tinos", var(--serif); font-weight:700; font-size:15px; letter-spacing:.01em; line-height:1;
  color:transparent; background:linear-gradient(160deg, #ffffff, #c4c8ce 46%, #eef1f4 56%, #8b9098);
  -webkit-background-clip:text; background-clip:text;
  transform:translate(-50%,-50%) rotate(calc(var(--i) * 30deg)) translateY(-94px);   /* 112 × .837 */
  opacity:0; animation:waRoman .6s var(--ease) forwards;
  animation-delay:calc(.35s + var(--o) * var(--step)); }

/* ── WA monogram, rebuilt in the logo's font, sized & proportioned to the original ── */
.loader__wa{ position:relative; z-index:2;
  font-family:"Tinos", var(--serif); font-weight:700; font-size:76px; letter-spacing:-.01em; line-height:1;
  color:transparent; background:linear-gradient(#ffffff, #dfe2e6 34%, #a9aeb5 52%, #f2f4f6 60%, #7f848c);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)); opacity:0; animation:waFade .8s ease .15s forwards; }

/* ── wordmark: word-level rise reveal ── */
.loader__word{ margin:36px 0 0; padding:0; display:flex; gap:.5em; overflow:hidden;
  font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase; color:var(--ink); }
.loader__word span{ display:inline-block; transform:translateY(118%); animation:waRise .95s var(--ease) forwards; }
.loader__word span:nth-child(2){ animation-delay:.12s; }

/* ── hairline rule ── */
.loader__rule{ margin-top:22px; width:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:waRule 1.15s var(--ease) .5s forwards; }

/* ── micro caption (no percentage) ── */
.loader__pct{ margin:18px 0 0;
  font-family:var(--sans); font-weight:400; font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted-2); opacity:0; animation:waFade .8s ease .72s forwards; }

/* ── exit: lift + fade ── */
.loader.is-done{ opacity:0; visibility:hidden; }
.loader.is-done .loader__inner{ transform:translateY(-12px); }

@keyframes waRoman{ 0%{ opacity:0; } 100%{ opacity:1; } }
@keyframes waRise{ to{ transform:translateY(0); } }
@keyframes waRule{ to{ width:134px; } }
@keyframes waFade{ to{ opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .loader__romans b{ animation:none; opacity:1; }
  .loader__word span{ animation:none; transform:none; }
  .loader__rule{ animation:none; width:134px; }
  .loader__pct{ animation:none; opacity:1; }
}