/* Glowing text selection */
::selection{
  background:linear-gradient(90deg, rgba(255,64,129,0.6), rgba(0,122,255,0.4));
  color:#fff;
  text-shadow:0 0 10px rgba(255,64,129,0.9), 0 0 20px rgba(0,122,255,0.7);
}
::-moz-selection{
  background:linear-gradient(90deg, rgba(255,64,129,0.6), rgba(0,122,255,0.4));
  color:#fff;
  text-shadow:0 0 10px rgba(255,64,129,0.9), 0 0 20px rgba(0,122,255,0.7);
}

/* Boot overlay (shared site-wide) */
.boot-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(4,6,10,0.55);
  z-index:9999;
  transition:opacity .35s ease, backdrop-filter .35s ease;
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  backdrop-filter: blur(6px) saturate(130%);
}

.boot-inner{
  padding:28px 36px;
  border-radius:18px;
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 24px 60px rgba(2,6,23,0.72), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.boot-inner::before{
  /* moving sheen */
  content:"";
  position:absolute;
  left:-70%;
  top:-20%;
  width:80%;
  height:140%;
  background:linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
  transform:skewX(-18deg) translateX(-100%);
  animation:liquidSheen 2.6s linear infinite;
  opacity:0.95;
  pointer-events:none;
  filter:blur(10px);
  mix-blend-mode:overlay;
}

.boot-inner::after{
  /* subtle inner glow / rim */
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  box-shadow: inset 0 6px 24px rgba(255,255,255,0.02), inset 0 -8px 30px rgba(0,0,0,0.25);
  pointer-events:none;
}

.boot-logo{
  font-family:Orbitron,Inter,system-ui,Segoe UI,Roboto,Arial;
  font-weight:900;
  color:#ff6fa3;
  font-size:clamp(28px,8vw,72px);
  letter-spacing:1px;
  text-transform:none;
  opacity:0;
  transform:translateY(6px) scale(.98);
  animation:bootLogo 900ms cubic-bezier(.2,.9,.2,1) forwards .15s;
  text-shadow:0 10px 30px rgba(255,111,163,0.12), 0 30px 80px rgba(0,0,0,0.65);
}

.boot-sub{color:rgba(255,255,255,0.78);font-size:14px;opacity:0;transform:translateY(6px);animation:bootLogo 900ms cubic-bezier(.2,.9,.2,1) forwards .25s}

/* Modern circular spinner with glass glow */
.boot-ring{display:flex;align-items:center;justify-content:center;margin-top:16px;position:relative}
.boot-ring::before{
  content:"";
  position:absolute;
  width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,111,163,0.06), transparent 30%), radial-gradient(circle at 70% 70%, rgba(0,122,255,0.04), transparent 40%);
  filter:blur(8px);
  pointer-events:none;
}
.spinner{width:68px;height:68px;display:block;filter:drop-shadow(0 8px 30px rgba(0,0,0,0.6))}
.spinner .path{stroke:#ff74a3;stroke-linecap:round;stroke-dasharray:89,200;stroke-dashoffset:0;animation:dash 1.4s ease-in-out infinite, spin 2s linear infinite;transform-origin:50% 50%;filter:drop-shadow(0 8px 28px rgba(255,111,163,0.12))}

@keyframes spin{100%{transform:rotate(360deg)}}
@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:100,200;stroke-dashoffset:-15px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}
@keyframes bootLogo{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes liquidSheen{0%{transform:skewX(-18deg) translateX(-100%)}50%{transform:skewX(-18deg) translateX(160%)}100%{transform:skewX(-18deg) translateX(160%)}}

@media (prefers-reduced-motion: reduce){
  .spinner .path{animation:none}
  .boot-inner::before{animation:none}
}

/* Additional smoothing hints */
html,body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transform:translateZ(0);
}
.boot-overlay, .boot-inner, .cta, .step, .back{
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.cta, .step, .back{transition:transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease}
.boot-inner{transition:transform 360ms cubic-bezier(.2,.9,.2,1), opacity 360ms cubic-bezier(.2,.9,.2,1)}

/* Fluid, subtle animations */
@keyframes floatY { 0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)} }
@keyframes driftX { 0%{transform:translateX(0) rotate(0)}50%{transform:translateX(6px) rotate(.25deg)}100%{transform:translateX(0) rotate(0)} }
@keyframes glowShift { 0%{filter:blur(60px) opacity:.28}50%{filter:blur(72px) opacity:.36}100%{filter:blur(60px) opacity:.28} }

/* apply gentle motion to hero elements */
.glow{animation:driftX 10s ease-in-out infinite; will-change:transform,filter}
.title{animation:floatY 8s ease-in-out infinite; will-change:transform}

/* float cards slightly with stagger when visible */
.card, .step{animation:floatY 9s ease-in-out infinite; animation-delay:0s; will-change:transform}
.card:nth-of-type(2), .step:nth-of-type(2){animation-delay:1.2s}
.card:nth-of-type(3), .step:nth-of-type(3){animation-delay:2.4s}

/* add a slow shimmer on CTA for life */
.cta::after{transition:transform 2.8s linear;}
.cta:hover::after{transform:skewX(-18deg) translateX(180%)}

/* subtle dynamic glow behind spinner */
.boot-ring::before{animation:glowShift 6.5s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  .glow, .title, .card, .step, .boot-ring::before{animation:none}
}

/* Mouse hover / parallax smoothing */
.hero{position:relative;overflow:visible}
.title{transition:transform 420ms cubic-bezier(.2,.9,.2,1)}
.glow{transition:transform 700ms cubic-bezier(.2,.9,.2,1), opacity 420ms ease}
.card, .step{transition:transform 420ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms ease}
.cta{transition:transform 240ms cubic-bezier(.2,.9,.2,1), box-shadow 240ms ease}

/* Subtle pointer effect for interactive items */
.card:hover, .step:hover{transform:translateY(-8px) scale(1.01)}
.cta:hover{transform:translateY(-6px) scale(1.03)}

@media (prefers-reduced-motion: reduce){
  .title, .glow, .card, .step, .cta{transition:none}
}

/* Subtle glass borders for site boxes */
.card, .step, .cta, .back{
  border: 1px solid rgba(255,255,255,0.06);
  outline: 1px solid rgba(255,255,255,0.015);
  border-radius: 10px;
}
.card:hover, .step:hover, .cta:hover, .back:hover{
  border-color: rgba(255,111,163,0.14);
  box-shadow: 0 20px 48px rgba(2,6,23,0.6), inset 0 1px rgba(255,255,255,0.02);
}

/* stronger focus for keyboard navigation */
.card:focus-within, .step:focus-within, .cta:focus, .back:focus{
  box-shadow: 0 22px 60px rgba(2,6,23,0.72), 0 0 0 4px rgba(255,111,163,0.06);
  border-color: rgba(255,111,163,0.18);
}

/* One-time magic effect (first visit) */
.magic-overlay{position:fixed;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;z-index:14000}
.magic-particle{position:absolute;width:12px;height:12px;border-radius:50%;opacity:0;transform:translateY(0) scale(0.8);mix-blend-mode:screen}
.magic-particle.small{width:8px;height:8px}
.magic-particle.large{width:16px;height:16px}

@media (prefers-reduced-motion: reduce){
  .magic-overlay, .magic-particle{display:none}
}
/* Auth UI removed */

/* Mobile performance fallback: reduce blurs/shadows and disable heavy effects */
@media (max-width:720px){
  .boot-overlay{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(4,6,10,0.75); }
  .boot-inner{ -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow:0 8px 18px rgba(2,6,23,0.6); padding:14px; }
  .boot-inner::before{ display:none }
  .glow{ display:none !important; }
  .cta{ -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow:none; border:1px solid rgba(255,255,255,0.04) }
  .card, .step{ box-shadow:none; border:1px solid rgba(255,255,255,0.04); }
  .magic-overlay, .magic-particle{ display:none !important }
  .title, .hero, .sub{ will-change:auto }
}

/* prevent scrolling on home page for small/touch devices (keeps visuals intact) */
@media (max-width:720px){
  .home-noscroll, .home-noscroll body{ overflow:hidden !important; touch-action:none !important; }
  .home-noscroll html, .home-noscroll{ height:100vh; }
  /* also support explicit home-page class on body to always prevent mobile scroll */
  .home-page, .home-page body, .home-page html{ overflow:hidden !important; touch-action:none !important; height:100vh !important; }
  .home-page .hero{ min-height:100vh; overflow:hidden; }
}

/* Mobile: keep headings centered on phones */
@media (max-width:720px){
  /* Home page hero stays centered both vertically and horizontally */
  .home-page .hero{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding-top:24px;
    padding-left:20px;
    padding-right:20px;
    box-sizing:border-box;
  }
  .home-page .title{font-size: clamp(48px,12vw,120px); line-height:1.02; margin:0 0 16px 0;}
  .home-page .sub, .home-page .credit{ text-align:center; margin-left:0; }
  .home-page .cta{ margin-top:18px }

  /* Ensure other pages' headings are centered on mobile */
  .container h1, h1{ text-align:center; margin-top:8px; }
  .container{ padding-top:12px; }
}

/* Further mobile perf: stop animations, transitions and filters on touch/small screens
   We keep the visual styles but make them static to avoid jank on high-refresh phones. */
@media (max-width:720px){
  .glow, .title, .card, .step, .boot-ring::before, .boot-inner::before, .boot-inner::after,
  .boot-logo, .boot-sub, .cta::after{
    animation: none !important;
    transition: none !important;
    filter: none !important;
    will-change: auto !important;
  }
  /* Keep spinner animation visible on mobile */
  .spinner, .spinner .path{
    animation: spin 2s linear infinite, dash 1.4s ease-in-out infinite !important;
  }

  /* Keep appearance but lower shadow / glow cost */
  .card, .step, .cta{ box-shadow: 0 6px 14px rgba(2,6,23,0.45) !important; }
  .boot-ring::before{ display:none !important }

  /* Ensure boot visuals are fully visible (no entrance anim) but visually similar */
  .boot-logo, .boot-sub{ opacity:1 !important; transform:none !important }

  /* Reduce paint cost for spinner */
  .spinner{ filter:none !important }
  .spinner .path{ stroke-opacity:0.95 }
}