/* ═══════════════════════════════════════════════
   SHARED.CSS — CSS compartido para todas las páginas
   Orbitian Studios
   ═══════════════════════════════════════════════ */

/* ── RESET + BASE ── */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  min-height:100vh;
  background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),#050505 url("assets/fondo-pagina-web-opt.jpg") center/cover no-repeat fixed;
  color:#f2f2f2;
  font-family:'Cormorant Garamond',Georgia,serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(0,0,0,.5);
  pointer-events:none;
}

/* ── ANTI-FOUC: override temporal de animaciones ── */
.line-inner{transform:translateY(0) !important;transition:none !important;}
.section-reveal,.section-reveal.is-visible{opacity:1 !important;transform:none !important;transition:none !important;}

/* ── LINE REVEAL ── */
.line-wrap{overflow:hidden;display:block;}
.line-inner{
  display:block;
  transform:translateY(110%);
  transition:transform 0.6s cubic-bezier(.22,.61,.36,1);
}
.line-inner.up{transform:translateY(0);}
.line-d1 .line-inner{transition-delay:.08s;}
.line-d2 .line-inner{transition-delay:.14s;}
.line-d3 .line-inner{transition-delay:.22s;}

/* ── SCROLL REVEAL ── */
.reveal{
  opacity:0;transform:translateY(36px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.in{opacity:1;transform:none;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:.15s;}
.reveal-d2{transition-delay:.32s;}
.reveal-d3{transition-delay:.48s;}
.reveal-d4{transition-delay:.65s;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ── SECTION REVEAL ── */
.section-reveal{
  opacity:0;transform:translateY(36px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1);
}
.section-reveal.is-visible{opacity:1;transform:translateY(0);}

/* ── KEYFRAMES COMPARTIDOS ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(26px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes zoomOut{
  from{transform:scale(1.06);}
  to{transform:scale(1);}
}
@keyframes shimmer{
  0%{background-position:150% center;}
  100%{background-position:-150% center;}
}

/* ── GLITCH TEXT ── */
@keyframes glitch-cyan{
  0%  {opacity:0;}
  6%  {opacity:1;transform:translate(-5px,0);clip-path:polygon(0 8%,100% 8%,100% 28%,0 28%);}
  12% {transform:translate(3px,0);clip-path:polygon(0 52%,100% 52%,100% 68%,0 68%);}
  18% {transform:translate(-6px,0);clip-path:polygon(0 3%,100% 3%,100% 18%,0 18%);}
  24% {transform:translate(4px,0);clip-path:polygon(0 72%,100% 72%,100% 88%,0 88%);}
  30% {transform:translate(-3px,0);clip-path:polygon(0 38%,100% 38%,100% 54%,0 54%);}
  36% {transform:translate(5px,0);clip-path:polygon(0 82%,100% 82%,100% 96%,0 96%);}
  42% {transform:translate(-2px,0);clip-path:polygon(0 22%,100% 22%,100% 40%,0 40%);}
  48% {opacity:1;}
  50% {opacity:0;transform:translate(0,0);}
  100%{opacity:0;}
}
@keyframes glitch-red{
  0%  {opacity:0;}
  6%  {opacity:1;transform:translate(5px,0);clip-path:polygon(0 62%,100% 62%,100% 80%,0 80%);}
  12% {transform:translate(-4px,0);clip-path:polygon(0 12%,100% 12%,100% 30%,0 30%);}
  18% {transform:translate(7px,0);clip-path:polygon(0 76%,100% 76%,100% 92%,0 92%);}
  24% {transform:translate(-3px,0);clip-path:polygon(0 28%,100% 28%,100% 46%,0 46%);}
  30% {transform:translate(5px,0);clip-path:polygon(0 4%,100% 4%,100% 18%,0 18%);}
  36% {transform:translate(-6px,0);clip-path:polygon(0 50%,100% 50%,100% 65%,0 65%);}
  42% {transform:translate(2px,0);clip-path:polygon(0 86%,100% 86%,100% 100%,0 100%);}
  48% {opacity:1;}
  50% {opacity:0;transform:translate(0,0);}
  100%{opacity:0;}
}

/* ── GLOW OVERLAY ── */
.hero-glow{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 55% 45% at 65% 65%,
    rgba(180,55,10,.11) 0%, transparent 70%);
}

/* ── BUTTON SWEEP-FILL ── */
.contact-cta,
.blog-cta,
.store-cta,
.service-cta,
.submit-btn,
.hero-btn{
  position:relative;overflow:hidden;z-index:0;
}
.contact-cta::before,
.blog-cta::before,
.store-cta::before,
.service-cta::before,
.submit-btn::before,
.hero-btn::before{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.09);
  transform:translateX(-101%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;z-index:-1;
}
.contact-cta:hover::before,
.blog-cta:hover::before,
.store-cta:hover::before,
.service-cta:hover::before,
.submit-btn:hover::before,
.hero-btn:hover::before{transform:translateX(0);}

/* ── CTA BUTTON BASE ── */
.contact-cta,
.blog-cta,
.store-cta,
.service-cta,
.hero-btn{
  min-width:178px;
  padding:14px 26px 13px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.035);
  color:#f6f6f6;
  font-family:'Cinzel',Georgia,serif;
  font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 18px 45px rgba(0,0,0,.3);
  transition:background .25s ease,border-color .25s ease,transform .25s ease,letter-spacing .25s ease;
}
.contact-cta:hover,
.blog-cta:hover,
.store-cta:hover,
.service-cta:hover,
.hero-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.58);
  background:rgba(255,255,255,.1);
  letter-spacing:.26em;
}

/* ── SUBMIT BUTTON ── */
.submit-btn{
  grid-column:1/-1;
  min-height:56px;
  padding:14px 26px 13px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.035);
  color:#f6f6f6;
  font-family:'Cinzel',Georgia,serif;
  font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 18px 45px rgba(0,0,0,.3);
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,letter-spacing .25s ease;
  position:relative;overflow:hidden;
}
.submit-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.58);
  background:rgba(255,255,255,.1);
  letter-spacing:.26em;
}

/* ── TOPBAR LOGIN BUTTON ── */
body > header.topbar > .topbar-login{
  padding:11px 20px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.035);
  color:#f6f6f6;
  font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 18px 45px rgba(0,0,0,.3);
  transition:background .25s ease,border-color .25s ease,transform .25s ease,letter-spacing .25s ease;
}
body > header.topbar > .topbar-login:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.58);
  background:rgba(255,255,255,.1);
  letter-spacing:.26em;
}

/* ── FORM FIELD BASE ── */
.field input,
.field select,
.field textarea{
  width:100%;min-height:52px;
  border:0;outline:0;
  background:rgba(8,8,8,.86);
  color:#f2f2f2;
  padding:0 18px;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:16px;
  border-radius:5px;
  transition:background .25s ease,box-shadow .25s ease;
}
.field textarea{min-height:150px;padding-top:16px;resize:vertical;}
.field input:focus,
.field select:focus,
.field textarea:focus{
  background:rgba(12,12,12,.96);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 14px 34px rgba(0,0,0,.36);
}

/* ── HONEYPOT (anti-spam) ── */
.hp-field{
  position:absolute!important;
  left:-9999px;width:1px;height:1px;
  opacity:0;overflow:hidden;pointer-events:none;
  display:none!important;
}

/* ── PRIVACY ROW ── */
.privacy-row{
  grid-column:1/-1;
  display:flex;align-items:center;gap:9px;
  color:#f4f4f4;font-size:16px;
}
.privacy-row input{width:16px;height:16px;}

/* ── SCROLL PROGRESS BAR ── */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:rgba(255,255,255,.5);pointer-events:none;transition:width .08s linear;}
@media(prefers-reduced-motion:reduce){.scroll-progress{display:none;}}

/* ── PAGE TRANSITION ── */
#page-transition{display:none;}
html{background:#050505;}
body{opacity:0;transition:opacity .42s ease;}
@media(prefers-reduced-motion:reduce){body{opacity:1;transition:none;}}