/* ============================================================
   Aegean Mosaic — "WOW" layer
   Additive enhancements on top of styles.css. No existing rule
   is overridden; everything here degrades gracefully and fully
   respects prefers-reduced-motion.
   ============================================================ */

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--gold-2),var(--gold),var(--terra));
  box-shadow:0 0 12px rgba(199,154,58,.7);transition:width .08s linear;
  border-bottom-right-radius:3px;pointer-events:none}

/* ---------- Cursor spotlight ---------- */
.spotlight{
  position:fixed;top:0;left:0;width:520px;height:520px;z-index:0;pointer-events:none;
  transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle at center,
    color-mix(in srgb,var(--gold) 26%,transparent) 0%,
    color-mix(in srgb,var(--gold) 8%,transparent) 34%,transparent 68%);
  mix-blend-mode:screen}
body.has-spot .spotlight{opacity:1}
@media(hover:none){.spotlight{display:none}}

/* ---------- Preloader: tiles assemble into the mark ---------- */
.preloader{
  position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%,var(--paper),var(--plaster) 60%,var(--plaster-2));
  animation:preAuto 2.9s ease forwards}
.pre-inner{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.pre-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:172px;height:172px;
  padding:10px;border-radius:16px;background:linear-gradient(135deg,var(--paper),var(--plaster-2));
  box-shadow:var(--shadow),var(--glow);position:relative}
.pre-grid::after{content:"";position:absolute;inset:6px;border:1px solid var(--gold);border-radius:11px;opacity:.5}
.pre-grid i{border-radius:4px;transform:scale(.2) rotate(-25deg);opacity:0;
  animation:preTile .5s cubic-bezier(.2,.9,.2,1.2) forwards}
.pre-word{font-family:var(--font-d);font-weight:700;font-size:1.5rem;letter-spacing:.06em;margin:.2rem 0 0;
  background:linear-gradient(100deg,var(--navy),var(--gold),var(--terra),var(--navy));
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:preSheen 2.2s linear infinite;opacity:0;animation-delay:.5s}
.pre-word,.pre-sub{animation-fill-mode:both}
.pre-sub{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text-soft);margin:0;
  opacity:0;animation:fadeIn .5s ease .8s forwards}
.preloader.done{animation:none;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
@keyframes preTile{to{transform:scale(1) rotate(0);opacity:1}}
@keyframes preSheen{0%{opacity:1;background-position:0% center}100%{background-position:220% center}}
@keyframes preAuto{0%,72%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes fadeIn{to{opacity:1}}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-zoom{opacity:0;transform:scale(.94)}
.reveal-zoom.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}

/* ---------- Nav elevates on scroll ---------- */
.nav.scrolled{box-shadow:0 10px 30px -18px rgba(28,29,35,.5);
  background:color-mix(in srgb,var(--plaster) 90%,transparent)}

/* ---------- Hero: 3D tilt + light parallax ---------- */
.hero-art{perspective:1100px}
.hero-art .frame{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .25s ease;will-change:transform}
.hero-art .frame::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);
  opacity:var(--sheen,0);transition:opacity .3s ease;mix-blend-mode:screen}
.hero-bg{will-change:transform}
/* soft morph when the hero art swaps scenes */
.hero-art .frame-inner svg{animation:sceneIn .9s ease}
@keyframes sceneIn{0%{opacity:0;transform:scale(1.03)}100%{opacity:1;transform:none}}

/* ---------- Count-up stat pop ---------- */
.hero-stats b{transition:transform .3s ease}
.hero-stats b.pop{transform:scale(1.14)}

/* ---------- Magnetic buttons ---------- */
.btn-gold,.chip-btn{will-change:transform}

/* ---------- Ambient tessera canvas (onchain section) ---------- */
.tess-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.5}
.onchain .section-head,.onchain .cards{position:relative;z-index:1}

/* ---------- Gauge celebration ---------- */
.gauge-wrap.celebrate::before{content:"";position:absolute;inset:-10px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 55%,transparent),transparent 68%);
  animation:halo 1.1s ease-out 2}
.gauge-wrap.celebrate .gauge-center b{animation:numPunch .6s ease}
@keyframes halo{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes numPunch{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ---------- Gold gem burst (celebration particles) ---------- */
.burst-gem{position:fixed;z-index:350;width:12px;height:12px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-2),var(--gold));border-radius:2px;pointer-events:none;
  box-shadow:0 0 8px rgba(199,154,58,.7);will-change:transform,opacity}

/* ---------- Frame hover lift for gallery + presets ---------- */
.g-item .frame,.preset-chip{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.g-item:hover .frame{transform:translateY(-6px) scale(1.015);box-shadow:var(--shadow),var(--glow)}

/* ---------- Animated section dividers ---------- */
.divider .d-gems i{transition:transform .3s ease}
.divider.in .d-gems i{animation:gemTwinkle 2.4s ease-in-out infinite}
.divider.in .d-gems i:nth-child(2){animation-delay:.3s}
.divider.in .d-gems i:nth-child(3){animation-delay:.6s}
@keyframes gemTwinkle{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.35)}}

/* ---------- Back-to-top ---------- */
.to-top{position:fixed;right:20px;bottom:24px;z-index:120;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--gold);background:color-mix(in srgb,var(--paper) 85%,transparent);
  color:var(--gold);cursor:pointer;display:grid;place-items:center;font-size:1.1rem;
  box-shadow:var(--shadow);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:.3s ease;backdrop-filter:blur(6px)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--gold);color:#211c0c}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .preloader{display:none!important}
  .reveal,.reveal-zoom{opacity:1!important;transform:none!important}
  .hero-art .frame{transform:none!important}
  .hero-bg{animation:none!important}
  .hero-art .frame-inner svg{animation:none!important}
  .divider.in .d-gems i{animation:none!important}
  .spotlight{display:none!important}
  .scroll-progress{transition:none}
}