/* Sol Agave logo intro: three variants (sunrise, bloom, fiesta).
   Only transform and opacity animate, so everything stays on the compositor. */
.loader{position:fixed;inset:0;z-index:400;overflow:hidden;background:#fbf6ee;--k:1;
  --out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);--io:cubic-bezier(.76,0,.24,1)}
html:not(.js) .loader{display:none}
html.preload{overflow:hidden}
html.preload .opener .w,html.preload .opener .kick,html.preload .ehero .mark,html.preload .ehero h1,html.preload .ehero p,
html.preload .ehero .ctas,html.preload .ehero .locs,html.preload .tierbar{animation-play-state:paused}

.loader .i-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.loader .i-lg{position:relative;width:min(560px,80vw);aspect-ratio:1674/630}
.loader .i-pc{position:absolute;display:block;opacity:0;will-change:transform,opacity;backface-visibility:hidden}
.loader .i-wordg{position:absolute;inset:0;will-change:transform,opacity}
.loader .i-wordg .i-pc{opacity:1}

/* ---------- Sunrise: cream, rising sun, logo assembles, curtain lifts ---------- */
.v-sunrise{background:radial-gradient(80% 70% at 50% 42%,#fffaf1 0%,#fbf6ee 55%,#f3e6d1 100%);transition:transform calc(.85s * var(--k)) var(--io)}
.v-sunrise .i-sun,.v-sunrise .i-rays{position:absolute;left:50%;top:17%;aspect-ratio:1;opacity:0;will-change:transform,opacity}
.v-sunrise .i-sun{width:52%;border-radius:50%;background:radial-gradient(circle,rgba(255,199,107,.95) 0%,rgba(242,163,58,.55) 38%,rgba(242,163,58,0) 70%)}
.v-sunrise .i-rays{width:120%}
.v-sunrise .i-rays svg{width:100%;height:100%;display:block;animation:sa-spin 70s linear infinite}
.v-sunrise.play .i-sun{animation:sa-sun calc(1.1s * var(--k)) var(--out) both}
.v-sunrise.play .i-rays{animation:sa-rays calc(1.3s * var(--k)) var(--out) calc(.1s * var(--k)) both}
.v-sunrise.play .i-icon{transform-origin:50% 100%;animation:sa-sprout calc(.95s * var(--k)) var(--spring) calc(.35s * var(--k)) both}
.v-sunrise.play .i-arcs{transform-origin:50% 50%;animation:sa-draw calc(.9s * var(--k)) var(--out) calc(.7s * var(--k)) both}
.v-sunrise .i-wordg{opacity:0}
.v-sunrise.play .i-wordg{animation:sa-rise calc(.85s * var(--k)) var(--out) calc(1s * var(--k)) both}
.v-sunrise.play .i-tag{transform-origin:50% 90%;animation:sa-tag calc(.85s * var(--k)) var(--spring) calc(1.35s * var(--k)) both}
.v-sunrise .i-glint{position:absolute;top:-20%;bottom:-20%;left:0;width:22%;opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0))}
.v-sunrise.play .i-glint{animation:sa-glint calc(.95s * var(--k)) ease-in-out calc(1.85s * var(--k)) both}
.v-sunrise .i-bar{margin-top:clamp(28px,4vw,44px);width:140px;height:2px;border-radius:2px;background:rgba(39,58,127,.12);overflow:hidden}
.v-sunrise .i-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#f2a33a,#b7402f);will-change:transform}
.v-sunrise.play .i-bar i{animation:sa-bar calc(2.4s * var(--k)) var(--io) both}
.v-sunrise.out{transform:translate3d(0,-100%,0)}
.v-sunrise .i-stage{transition:transform calc(.85s * var(--k)) var(--io),opacity calc(.5s * var(--k))}
.v-sunrise.out .i-stage{transform:translate3d(0,-60px,0);opacity:0}

/* ---------- Bloom: night sky, the agave blooms, letters rise ---------- */
.v-bloom{background:radial-gradient(70% 60% at 50% 45%,#1d2757 0%,#0b1230 70%);transition:opacity calc(.8s * var(--k)) var(--out)}
.v-bloom .i-glow{position:absolute;left:50%;top:18%;width:90%;aspect-ratio:1;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(255,199,107,.42) 0%,rgba(51,148,207,.18) 40%,rgba(11,18,48,0) 68%)}
.v-bloom.play .i-glow{animation:sa-glow calc(1.6s * var(--k)) var(--out) both}
.v-bloom.play .i-icon{transform-origin:50% 100%;animation:sa-bloom calc(1.1s * var(--k)) var(--spring) calc(.2s * var(--k)) both}
.v-bloom.play .i-arcs{transform-origin:50% 50%;animation:sa-draw calc(1s * var(--k)) var(--out) calc(.6s * var(--k)) both}
.v-bloom .i-wordg .i-pc{opacity:0}
.v-bloom.play .i-wordg .i-pc{transform-origin:50% 100%;animation:sa-letter calc(.75s * var(--k)) var(--out) calc((.85s + var(--i) * .07s) * var(--k)) both}
.v-bloom.play .i-tag{animation:sa-rise calc(.85s * var(--k)) var(--out) calc(1.6s * var(--k)) both}
.v-bloom .i-spark{position:absolute;bottom:-10%;width:5px;height:5px;border-radius:50%;background:#ffc76b;opacity:0;will-change:transform,opacity;box-shadow:0 0 10px #ffc76b}
.v-bloom.play .i-spark{animation:sa-spark calc(2.6s * var(--k)) var(--out) calc(var(--d) * var(--k)) both}
.v-bloom .i-stage{transition:transform calc(.9s * var(--k)) var(--out)}
.v-bloom.out{opacity:0}
.v-bloom.out .i-stage{transform:scale(1.14)}

/* ---------- Fiesta: papel picado drops, logo pops, confetti, the screen splits ---------- */
.v-fiesta{background:transparent}
.v-fiesta .i-half{position:absolute;top:0;bottom:0;width:50.5%;background:radial-gradient(120% 90% at 50% 40%,#fffaf1,#f6ead6);will-change:transform;
  transition:transform calc(.85s * var(--k)) var(--io) calc(.2s * var(--k))}
.v-fiesta .i-half.l{left:0}.v-fiesta .i-half.r{right:0}
.v-fiesta.out .i-half.l{transform:translate3d(-100%,0,0)}
.v-fiesta.out .i-half.r{transform:translate3d(100%,0,0)}
.v-fiesta .i-papel{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;gap:1.2vw;transform:translate3d(0,-120%,0);will-change:transform}
.v-fiesta.play .i-papel{animation:sa-drop calc(.9s * var(--k)) var(--spring) both}
.v-fiesta .i-flag{width:clamp(44px,6.2vw,86px);transform-origin:50% 0;will-change:transform;animation:sa-sway 3.2s ease-in-out infinite;animation-delay:var(--d)}
.v-fiesta .i-flag svg{display:block;width:100%;height:auto}
.v-fiesta.play .i-icon{transform-origin:50% 90%;animation:sa-pop calc(.7s * var(--k)) var(--spring) calc(.45s * var(--k)) both}
.v-fiesta.play .i-arcs{transform-origin:50% 50%;animation:sa-draw calc(.8s * var(--k)) var(--out) calc(.7s * var(--k)) both}
.v-fiesta .i-wordg .i-pc{opacity:0}
.v-fiesta.play .i-wordg .i-pc{transform-origin:50% 80%;animation:sa-pop calc(.6s * var(--k)) var(--spring) calc((.9s + var(--i) * .05s) * var(--k)) both}
.v-fiesta.play .i-tag{transform-origin:50% 80%;animation:sa-wiggle calc(.9s * var(--k)) var(--spring) calc(1.4s * var(--k)) both}
.v-fiesta .i-bit{position:absolute;left:50%;top:46%;width:10px;height:16px;border-radius:2px;opacity:0;will-change:transform,opacity}
.v-fiesta.play .i-bit{animation:sa-burst calc(1.3s * var(--k)) var(--out) calc(1.35s * var(--k)) both}
.v-fiesta .i-stage{transition:transform calc(.35s * var(--k)) var(--out),opacity calc(.3s * var(--k))}
.v-fiesta.out .i-papel{opacity:0;transition:opacity calc(.3s * var(--k))}
.v-fiesta.out .i-stage{opacity:0;transform:scale(.94)}

/* ---------- Noche: Bloom's night bloom + Fiesta's papel picado, confetti and split ---------- */
.v-noche{background:linear-gradient(0deg,#3a2350 0%,#1d2757 34%,#111a42 62%,#0b1230 100%);transition:opacity calc(.85s * var(--k)) var(--out)}
.v-noche .i-horizon{position:absolute;left:-10%;right:-10%;bottom:0;height:75%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(70% 90% at 50% 100%,rgba(242,163,58,.55) 0%,rgba(183,64,47,.35) 32%,rgba(183,64,47,0) 70%),linear-gradient(0deg,rgba(226,125,80,.45),rgba(226,125,80,0) 60%)}
.v-noche.play .i-horizon{animation:sa-horizon calc(1.8s * var(--k)) var(--out) both}
.v-noche .i-papel{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;gap:1.2vw;transform:translate3d(0,-120%,0);will-change:transform}
.v-noche.play .i-papel{animation:sa-drop calc(1s * var(--k)) var(--spring) calc(.15s * var(--k)) both}
.v-noche .i-flag{width:clamp(44px,6.2vw,86px);transform-origin:50% 0;will-change:transform;animation:sa-sway 3.2s ease-in-out infinite;animation-delay:var(--d)}
.v-noche .i-flag svg{display:block;width:100%;height:auto}
.v-noche .i-glow{position:absolute;left:50%;top:18%;width:90%;aspect-ratio:1;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,rgba(255,199,107,.42) 0%,rgba(51,148,207,.18) 40%,rgba(11,18,48,0) 68%)}
.v-noche.play .i-glow{animation:sa-glow calc(1.6s * var(--k)) var(--out) both}
.v-noche.play .i-icon{transform-origin:50% 100%;animation:sa-bloom calc(1.1s * var(--k)) var(--spring) calc(.3s * var(--k)) both}
.v-noche.play .i-arcs{transform-origin:50% 50%;animation:sa-draw calc(1s * var(--k)) var(--out) calc(.7s * var(--k)) both}
.v-noche .i-wordg .i-pc{opacity:0}
.v-noche.play .i-wordg .i-pc{transform-origin:50% 100%;animation:sa-letter calc(.75s * var(--k)) var(--out) calc((.95s + var(--i) * .07s) * var(--k)) both}
.v-noche.play .i-tag{transform-origin:50% 80%;animation:sa-wiggle calc(.9s * var(--k)) var(--spring) calc(1.65s * var(--k)) both}
.v-noche .i-bit{position:absolute;left:50%;top:46%;width:10px;height:16px;border-radius:2px;opacity:0;will-change:transform,opacity}
.v-noche.play .i-bit{animation:sa-burst calc(1.4s * var(--k)) var(--out) calc(1.6s * var(--k)) both}
.v-noche .i-spark{position:absolute;bottom:-10%;width:5px;height:5px;border-radius:50%;background:#ffc76b;opacity:0;will-change:transform,opacity;box-shadow:0 0 10px #ffc76b}
.v-noche.play .i-spark{animation:sa-spark calc(2.8s * var(--k)) var(--out) calc(var(--d) * var(--k)) both}
.v-noche .i-stage{transition:transform calc(.9s * var(--k)) var(--out)}
.v-noche.out{opacity:0}
.v-noche.out .i-stage{transform:scale(1.14)}
.v-noche.out .i-papel{opacity:0;transition:opacity calc(.45s * var(--k))}

/* ---------- keyframes (transform + opacity only) ---------- */
@keyframes sa-spin{to{transform:rotate(360deg)}}
@keyframes sa-horizon{from{opacity:0;transform:translate3d(0,30%,0)}to{opacity:1;transform:none}}
@keyframes sa-sun{from{opacity:0;transform:translate3d(-50%,-20%,0) scale(.2)}to{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}}
@keyframes sa-rays{from{opacity:0;transform:translate3d(-50%,-50%,0) scale(.6)}to{opacity:.55;transform:translate3d(-50%,-50%,0) scale(1)}}
@keyframes sa-glow{from{opacity:0;transform:translate3d(-50%,-50%,0) scale(.5)}to{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}}
@keyframes sa-sprout{from{opacity:0;transform:scale(.55,.05)}40%{opacity:1}to{opacity:1;transform:none}}
@keyframes sa-bloom{from{opacity:0;transform:rotate(-24deg) scale(.35)}45%{opacity:1}to{opacity:1;transform:none}}
@keyframes sa-draw{from{opacity:0;transform:scaleX(0)}30%{opacity:1}to{opacity:1;transform:none}}
@keyframes sa-rise{from{opacity:0;transform:translate3d(0,18px,0) scale(.98)}to{opacity:1;transform:none}}
@keyframes sa-tag{from{opacity:0;transform:translate3d(0,26px,0) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes sa-letter{from{opacity:0;transform:translate3d(0,55%,0) scaleY(.85)}to{opacity:1;transform:none}}
@keyframes sa-pop{from{opacity:0;transform:scale(.2)}55%{opacity:1}to{opacity:1;transform:none}}
@keyframes sa-wiggle{from{opacity:0;transform:scale(.5) rotate(-8deg)}55%{opacity:1;transform:scale(1.06) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes sa-glint{from{opacity:0;transform:translate3d(-150%,0,0) skewX(-18deg)}20%{opacity:1}80%{opacity:1}to{opacity:0;transform:translate3d(520%,0,0) skewX(-18deg)}}
@keyframes sa-bar{to{transform:scaleX(1)}}
@keyframes sa-spark{from{opacity:0;transform:translate3d(0,0,0)}20%{opacity:.9}to{opacity:0;transform:translate3d(var(--x),-70vh,0)}}
@keyframes sa-drop{from{transform:translate3d(0,-120%,0)}to{transform:none}}
@keyframes sa-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes sa-burst{from{opacity:1;transform:translate3d(-50%,-50%,0) scale(.3) rotate(0)}to{opacity:0;transform:translate3d(var(--x),var(--y),0) scale(1) rotate(var(--r))}}

/* comparison page: loader lives inside a frame instead of the viewport */
.loader.boxed{position:absolute}
