/* BlumenClub, capa de movimiento (edición 01 + movimiento).
   Todo lo animado vive aquí. La capa solo se activa con html.mo (JS presente y sin prefers-reduced-motion);
   sin ella la página es la misma web estática, completa y legible.
   Reglas: solo transform/opacity (translate, scale y rotate como propiedades sueltas para no pisar otros transform),
   entradas con ease-out, 150-400 ms en microinteracciones, 0.9-1.2 s en entradas de pantalla, escalones de 80-85 ms. */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --persp:1150px;
}

/* ───────── splash ───────── */
#splash{display:none}
.mo #splash{position:fixed;inset:0;z-index:250;display:grid;place-items:center;align-content:center;gap:26px;
  background-color:#0B0B0C;transition:opacity .6s ease}
.mo #splash.out{opacity:0;pointer-events:none}
.sp-mark{opacity:0;animation:riseIn 1.25s ease .15s forwards}
.sp-mark img{width:clamp(170px,24vw,280px);height:auto}
.sp-bar{width:clamp(120px,17vw,210px);height:1px;background:rgba(244,242,239,.16);overflow:hidden}
.sp-bar s{display:block;height:100%;background:var(--gold-lt);transform:scaleX(0);transform-origin:left;transition:transform .55s ease;text-decoration:none}
.sp-tag{font:600 .64rem/1.4 var(--f-body);letter-spacing:.26em;text-transform:uppercase;color:rgba(244,242,239,.42);opacity:0;animation:riseIn .9s ease .7s forwards}
@keyframes riseIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
body.splashing{overflow:hidden}


/* ───────── header ───────── */
.nav-bar{transition:transform .5s var(--ease),opacity 1s ease .2s}
.nav-bar.hide{transform:translateY(-101%)}
.mo body:not(.shown) .nav-bar,.mo body:not(.shown) .strip{opacity:0}
.strip{transition:opacity 1s ease .2s}
#prog{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:2px;z-index:70;pointer-events:none}
#prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dp),var(--gold) 40%,var(--gold-lt));transform:scaleX(0);transform-origin:left}
body.splashing #prog{opacity:0}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-links a.on{color:var(--gold-lt)}

/* ───────── hero ───────── */
.mo .hero-bg{transition:opacity 1.8s ease}
.mo body:not(.shown) .hero-bg{opacity:0}
.hero-bg{will-change:transform}
.mo .hs{transition:opacity 1s var(--ease) var(--hd,0s),translate 1.1s var(--ease) var(--hd,0s),filter 1s var(--ease) var(--hd,0s)}
.mo body:not(.revealed) .hs{opacity:0;translate:0 14px;filter:blur(6px)}
.mo .hero h1 .sw{transition:opacity 1.05s var(--ease) calc(.5s + var(--i,0)*.085s),translate 1.15s var(--ease) calc(.5s + var(--i,0)*.085s),filter 1.05s var(--ease) calc(.5s + var(--i,0)*.085s)}
.mo body:not(.revealed) .hero h1 .sw{opacity:0;translate:0 .42em;filter:blur(7px)}
.sw{display:inline-block}

/* scroll cue (a hairline that sweeps) */
.cue{position:absolute;display:flex;align-items:center;gap:10px;font:600 .66rem/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:rgba(244,242,239,.5);white-space:nowrap;pointer-events:none}
.cue s{display:block;position:relative;width:44px;height:1px;background:rgba(244,242,239,.28);overflow:hidden;text-decoration:none}
.cue s::after{content:"";position:absolute;inset:0;background:#F4F2EF;transform:translateX(-100%);animation:sweep 2.6s ease infinite}
@keyframes sweep{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}
.hero-cue{left:50%;bottom:30px;translate:-50% 0;transition:opacity 1s ease 1.8s}
.mo body:not(.revealed) .hero-cue,body.scrolled .hero-cue{opacity:0;transition-delay:0s}
@media(max-width:960px),(max-aspect-ratio:5/4){.hero-cue{display:none}}
.hero.is-off .cue s::after{animation-play-state:paused}

/* ───────── headings that arrive word by word ───────── */
.mo .wd .sw{transition:opacity 1.05s var(--ease) calc(var(--i,0)*.085s),translate 1.15s var(--ease) calc(var(--i,0)*.085s),filter 1.05s var(--ease) calc(var(--i,0)*.085s)}
.mo .wd:not(.is-in) .sw{opacity:0;translate:0 .42em;filter:blur(7px)}
/* pull quote: words light up with the scroll */
.mo .pull-q .sw{opacity:.2;transition:opacity .35s ease}

/* ───────── scroll reveals (small offset, reads as a fade) ───────── */
.mo .rv{transition:opacity .9s var(--ease),translate 1.05s var(--ease),transform .5s var(--ease),border-color .4s ease}
.mo .rv:not(.in){opacity:0;translate:0 18px}
.mo .cm-collage img{transition:scale 1.6s var(--ease)}
.mo .cm-collage:not(.in) img{scale:1.14}
.cm-collage img{will-change:transform}
/* ratio bars fill in */
/* footer hairline draws */
.mo .foot::before{transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease)}
.mo .foot.in::before{transform:scaleX(1)}
/* faq: the question leans in */
.faq-q{transition:color .4s ease,translate .4s var(--ease)}
.faq-q:hover{translate:6px 0}
/* form fields */
.field label{transition:color .3s ease}
.field:focus-within label{color:var(--gold-dp)}
.field input,.field textarea{transition:border-color .3s ease,box-shadow .3s ease}
.field input:focus-visible,.field textarea:focus-visible{box-shadow:0 2px 0 0 var(--gold-dp)}


/* ───────── cards: tilt and magnetic buttons (fine pointers) ───────── */
.tl{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.mag{transition:background-color .4s ease,border-color .4s ease,color .4s ease,translate .4s var(--ease)}

/* ───────── custom cursor ───────── */
#dot{display:none}
.has-dot #dot{display:grid;place-items:center;position:fixed;left:0;top:0;width:19px;height:19px;margin:-9.5px 0 0 -9.5px;border-radius:50%;
  background:rgba(214,212,209,.9);mix-blend-mode:difference;border:1px solid transparent;pointer-events:none;z-index:300;opacity:0;
  font:600 .62rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#fff;
  transition:width .35s ease,height .35s ease,margin .35s ease,background-color .35s ease,border-color .35s ease,opacity .25s ease}
.has-dot #dot.on{opacity:1}
.has-dot #dot.wide{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(244,242,239,.14);border-color:rgba(244,242,239,.75)}
.has-dot #dot.lab{width:78px;height:78px;margin:-39px 0 0 -39px}
.has-dot #dot.lab::after{content:attr(data-l)}
.has-dot #dot.txt{opacity:0}
.has-dot,.has-dot a,.has-dot button,.has-dot summary,.has-dot label,.has-dot .card,.has-dot .arch-stage{cursor:none}
.has-dot input,.has-dot textarea{cursor:text}

/* ───────── full-screen menu (compact widths) ───────── */
.menu{position:fixed;inset:0;z-index:80;display:grid;grid-template-rows:1fr auto;gap:24px;overflow:auto;
  padding:calc(92px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
  background-color:#050505;color:var(--on-ink);
  clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none;transition:clip-path .85s var(--ease),visibility 0s .85s}
.menu.open{clip-path:inset(0);visibility:visible;pointer-events:auto;transition:clip-path .85s var(--ease),visibility 0s}
.menu-nav{display:flex;flex-direction:column;justify-content:center;gap:clamp(2px,1vw,8px)}
.menu-nav a{display:flex;align-items:baseline;gap:16px;width:max-content;max-width:100%;text-decoration:none;color:var(--on-ink);
  font:700 clamp(30px,8.4vw,62px)/1.12 var(--f-name);letter-spacing:-.03em;
  opacity:0;translate:0 26px;transition:opacity .7s var(--ease),translate .8s var(--ease),color .3s ease}
.menu-nav a i{font:600 .7rem/1 var(--f-body);font-style:normal;letter-spacing:.2em;color:var(--gold);min-width:2.4ch}
.menu.open .menu-nav a{opacity:.62;translate:0 0;transition-delay:calc(.28s + var(--i,0)*.055s)}
.menu.open .menu-nav a:hover,.menu.open .menu-nav a.on,.menu.open .menu-nav a:focus-visible{opacity:1;transition-delay:0s}
.menu-nav .menu-cta{color:var(--gold-lt);margin-top:10px}
.menu-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;color:var(--mute-ink);font-size:.82rem;opacity:0;transition:opacity .6s ease}
.menu.open .menu-foot{opacity:1;transition-delay:.7s}
body.menu-open .nav-bar{z-index:95;background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent;transform:none}
body.menu-open #prog{opacity:0}
.nav-bar.compact .nav-links{display:none!important}



/* ───────── fallbacks ───────── */
@media(prefers-reduced-motion:reduce){
  #splash{display:none!important}
  .card{transition:none}
}