/* =============================================
   LIENZO VIRTUAL — AURORA DIGITAL
   Theme: Aurora Borealis over Crystal Monoliths
   ============================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --deep:#050510;
  --lake:#08081a;
  --fg:#e8e4f0;
  --fg-dim:#8a84a0;
  --glass:rgba(255,255,255,0.02);
  --glass-border:rgba(255,255,255,0.06);
}

html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--deep);
  color:var(--fg);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* ============================================
   AURORA LAYERS (animated gradients)
   ============================================ */
.aurora-container{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.aurora-band{
  position:absolute;
  width:200%;
  height:60%;
  top:-10%;
  left:-50%;
  filter:blur(60px);
  opacity:0.5;
  animation:aurora-drift 20s ease-in-out infinite alternate;
}
.aurora-band:nth-child(1){
  background:linear-gradient(120deg,transparent 30%,rgba(74,222,128,0.15)40%,rgba(96,165,250,0.12)60%,transparent 70%);
  animation-duration:25s;
  animation-delay:0s;
  top:-5%;
}
.aurora-band:nth-child(2){
  background:linear-gradient(100deg,transparent 20%,rgba(244,114,182,0.12)35%,rgba(167,139,250,0.1)55%,transparent 65%);
  animation-duration:30s;
  animation-delay:-5s;
  top:5%;
  opacity:0.35;
}
.aurora-band:nth-child(3){
  background:linear-gradient(140deg,transparent 25%,rgba(251,191,36,0.1)40%,rgba(244,114,182,0.08)60%,transparent 70%);
  animation-duration:22s;
  animation-delay:-10s;
  top:15%;
  opacity:0.3;
}
.aurora-band:nth-child(4){
  background:linear-gradient(110deg,transparent 30%,rgba(96,165,250,0.08)45%,rgba(74,222,128,0.06)65%,transparent 75%);
  animation-duration:28s;
  animation-delay:-15s;
  top:25%;
  opacity:0.25;
}
@keyframes aurora-drift{
  0%{transform:translateX(-5%) skewX(-3deg) scaleY(1)}
  50%{transform:translateX(5%) skewX(3deg) scaleY(1.1)}
  100%{transform:translateX(-3%) skewX(-2deg) scaleY(0.95)}
}

/* Stars */
.stars-layer{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.star{
  position:absolute;
  width:2px;
  height:2px;
  background:white;
  border-radius:50%;
  animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:0.2;transform:scale(1)}
  50%{opacity:0.9;transform:scale(1.3)}
}

/* Shooting star */
.shooting-star{
  position:absolute;
  width:100px;
  height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0.8),transparent);
  border-radius:50%;
  opacity:0;
  animation:shoot 8s linear infinite;
  animation-delay:var(--shoot-delay,0s);
}
@keyframes shoot{
  0%{transform:translateX(0) translateY(0) rotate(-45deg);opacity:0}
  10%{opacity:1}
  20%{transform:translateX(300px) translateY(300px) rotate(-45deg);opacity:0}
  100%{opacity:0}
}

/* ============================================
   LAKE / WATER SURFACE
   ============================================ */
.lake{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:45%;
  background:linear-gradient(to bottom,transparent 0%,rgba(8,8,26,0.5)20%,var(--lake)60%);
  z-index:2;
  pointer-events:none;
}
.lake::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.03) 30%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.03) 70%,transparent);
  filter:blur(1px);
}

/* Water shimmer */
.water-shimmer{
  position:fixed;
  bottom:0;
  left:0;
  width:200%;
  height:40%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.015)25%,transparent 50%,rgba(255,255,255,0.01)75%,transparent 100%);
  background-size:50% 100%;
  animation:shimmer 15s linear infinite;
  z-index:2;
  pointer-events:none;
}
@keyframes shimmer{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ============================================
   SNOW / PARTICLES
   ============================================ */
.snow-layer{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  overflow:hidden;
}
.snowflake{
  position:absolute;
  top:-10px;
  border-radius:50%;
  background:rgba(255,255,255,0.6);
  animation:snow-fall linear infinite;
}
@keyframes snow-fall{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:0.8}
  90%{opacity:0.4}
  100%{transform:translateY(110vh) translateX(30px);opacity:0}
}

/* ============================================
   COOKIE BANNER
   ============================================ */
.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:rgba(5,5,16,0.95);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--glass-border);
  padding:1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  z-index:1000;
  font-size:0.85rem;
  transform:translateY(0);
  transition:transform 0.5s ease;
}
.cookie-banner.hidden{
  transform:translateY(120%);
}
.cookie-banner p{
  color:var(--fg-dim);
  max-width:600px;
  line-height:1.5;
}
.cookie-banner a{
  color:#93c5fd;
  text-decoration:underline;
  text-underline-offset:2px;
}
.cookie-banner a:hover{color:#bfdbfe}
.cookie-btn{
  background:linear-gradient(135deg,#4ade80,#22c55e);
  color:#052e16;
  border:none;
  padding:0.6rem 1.5rem;
  border-radius:8px;
  font-weight:600;
  font-size:0.85rem;
  cursor:pointer;
  white-space:nowrap;
  transition:all 0.3s ease;
  box-shadow:0 4px 15px rgba(74,222,128,0.25);
}
.cookie-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(74,222,128,0.35);
}
@media (max-width:640px){
  .cookie-banner{flex-direction:column;text-align:center;gap:1rem;padding:1rem}
}

/* ============================================
   HEADER
   ============================================ */
.header{
  text-align:center;
  padding:3rem 1.5rem 1rem;
  position:relative;
  z-index:10;
}
.header h1{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:800;
  letter-spacing:-0.03em;
  background:linear-gradient(135deg,#fff 0%,#c4b5fd 50%,#93c5fd 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 2px 10px rgba(139,92,246,0.2));
}
.header p{
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  color:var(--fg-dim);
  margin-top:0.75rem;
  letter-spacing:0.1em;
}
.header-glow{
  width:120px;
  height:3px;
  background:linear-gradient(90deg,transparent,#a78bfa,transparent);
  margin:1.5rem auto 0;
  border-radius:2px;
  animation:glow-pulse 3s ease-in-out infinite;
}
@keyframes glow-pulse{
  0%,100%{opacity:0.5}
  50%{opacity:1}
}

/* ============================================
   MONOLITHS GRID
   ============================================ */
.monoliths{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:3rem;
  max-width:1100px;
  margin:3rem auto 4rem;
  padding:0 1.5rem;
  position:relative;
  z-index:10;
  align-items:end;
}

/* ============================================
   MONOLITH
   ============================================ */
.monolith{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:inherit;
  position:relative;
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.monolith:not(.future){cursor:pointer}
.monolith:hover{transform:translateY(-15px) scale(1.02)}

/* Crystal body */
.crystal{
  position:relative;
  width:100%;
  max-width:260px;
  background:linear-gradient(180deg,var(--crystal-top) 0%,var(--crystal-mid) 40%,var(--crystal-bot) 100%);
  border-radius:120px 120px 8px 8px;
  padding:2.5rem 1.5rem 2rem;
  text-align:center;
  overflow:hidden;
  border:1px solid var(--crystal-border);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 20px 40px rgba(0,0,0,0.4),
    0 0 60px var(--crystal-glow);
  transition:all 0.4s ease;
}
.monolith:hover .crystal{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 30px 60px rgba(0,0,0,0.5),
    0 0 100px var(--crystal-glow),
    inset 0 0 30px rgba(255,255,255,0.03);
}

/* Inner light ray */
.crystal::before{
  content:'';
  position:absolute;
  top:-50%;
  left:50%;
  transform:translateX(-50%);
  width:60%;
  height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,0.08)0%,transparent 70%);
  filter:blur(20px);
  pointer-events:none;
}

/* Icon */
.crystal-icon{
  font-size:3rem;
  margin-bottom:0.75rem;
  display:block;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  transition:transform 0.4s ease;
}
.monolith:hover .crystal-icon{transform:scale(1.2) translateY(-5px)}

/* Title */
.crystal-title{
  font-family:'JetBrains Mono',monospace;
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:0.5rem;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,0.3);
}

/* Desc */
.crystal-desc{
  font-size:0.875rem;
  line-height:1.6;
  color:rgba(255,255,255,0.75);
  margin-bottom:1rem;
}

/* Status */
.crystal-status{
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  padding:0.3rem 0.9rem;
  border-radius:100px;
  background:rgba(0,0,0,0.2);
  border:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.7);
}
.status-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--status-color,#4ade80);
  box-shadow:0 0 8px var(--status-color,#4ade80);
  animation:status-breathe 2.5s ease-in-out infinite;
}
@keyframes status-breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(0.8)}
}

/* Reflection in water */
.reflection{
  width:100%;
  max-width:260px;
  height:80px;
  margin-top:4px;
  background:linear-gradient(180deg,var(--crystal-bot) 0%,transparent 100%);
  border-radius:8px 8px 120px 120px;
  opacity:0.15;
  filter:blur(8px);
  transform:scaleY(-1);
  transition:all 0.4s ease;
  position:relative;
}
.reflection::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--lake) 0%,transparent 60%);
}
.monolith:hover .reflection{
  opacity:0.25;
  filter:blur(6px);
  transform:scaleY(-1) translateY(-5px);
}

/* Float animation */
.monolith{
  animation:monolith-float var(--float-dur,6s) ease-in-out infinite;
  animation-delay:var(--float-delay,0s);
}
@keyframes monolith-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.monolith:hover{animation-play-state:paused}

/* ============================================
   COLOR VARIANTS
   ============================================ */
.monolith.linux{
  --crystal-top:rgba(74,222,128,0.12);
  --crystal-mid:rgba(34,197,94,0.08);
  --crystal-bot:rgba(22,101,52,0.15);
  --crystal-border:rgba(74,222,128,0.15);
  --crystal-glow:rgba(74,222,128,0.2);
  --float-dur:7s;
  --float-delay:0s;
}
.monolith.menu{
  --crystal-top:rgba(96,165,250,0.12);
  --crystal-mid:rgba(59,130,246,0.08);
  --crystal-bot:rgba(30,64,175,0.15);
  --crystal-border:rgba(96,165,250,0.15);
  --crystal-glow:rgba(96,165,250,0.2);
  --float-dur:6s;
  --float-delay:0.8s;
}
.monolith.electric{
  --crystal-top:rgba(251,191,36,0.12);
  --crystal-mid:rgba(245,158,11,0.08);
  --crystal-bot:rgba(161,98,7,0.15);
  --crystal-border:rgba(251,191,36,0.15);
  --crystal-glow:rgba(251,191,36,0.2);
  --float-dur:8s;
  --float-delay:1.6s;
}
.monolith.deals{
  --crystal-top:rgba(244,114,182,0.12);
  --crystal-mid:rgba(236,72,153,0.08);
  --crystal-bot:rgba(190,24,93,0.15);
  --crystal-border:rgba(244,114,182,0.15);
  --crystal-glow:rgba(244,114,182,0.2);
  --float-dur:7.5s;
  --float-delay:2.4s;
}
.monolith.future{
  --crystal-top:rgba(167,139,250,0.06);
  --crystal-mid:rgba(139,92,246,0.04);
  --crystal-bot:rgba(76,29,149,0.08);
  --crystal-border:rgba(167,139,250,0.08);
  --crystal-glow:rgba(167,139,250,0.1);
  --float-dur:9s;
  --float-delay:3.2s;
  opacity:0.45;
  pointer-events:none;
}
.monolith.future .status-dot{background:#fbbf24;box-shadow:0 0 8px #fbbf24}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{
  position:relative;
  z-index:10;
  background:linear-gradient(to bottom,rgba(5,5,16,0.5),rgba(5,5,16,0.95));
  border-top:1px solid var(--glass-border);
  padding:3rem 1.5rem 1.5rem;
  margin-top:2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2rem;
  max-width:1000px;
  margin:0 auto;
}
.footer-col h4{
  font-family:'JetBrains Mono',monospace;
  font-size:0.8rem;
  font-weight:600;
  color:var(--fg);
  margin-bottom:1rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.footer-col p{
  font-size:0.85rem;
  color:var(--fg-dim);
  line-height:1.6;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:0.5rem}
.footer-col a{
  color:var(--fg-dim);
  text-decoration:none;
  font-size:0.85rem;
  transition:color 0.2s ease;
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
}
.footer-col a:hover{color:#c4b5fd}
.footer-col a::before{
  content:'›';
  color:#a78bfa;
  font-weight:bold;
  opacity:0;
  transform:translateX(-5px);
  transition:all 0.2s ease;
}
.footer-col a:hover::before{opacity:1;transform:translateX(0)}

.footer-bottom{
  text-align:center;
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--glass-border);
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:var(--fg-dim);
}
.footer-bottom a{
  color:var(--fg-dim);
  text-decoration:none;
  margin:0 0.5rem;
  transition:color 0.2s ease;
}
.footer-bottom a:hover{color:#c4b5fd}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:640px){
  .monoliths{grid-template-columns:1fr;gap:2.5rem;margin-top:2rem}
  .crystal{max-width:280px;margin:0 auto}
  .reflection{max-width:280px;margin:4px auto 0}
  .header{padding:2.5rem 1rem 0.5rem}
  .footer-grid{grid-template-columns:1fr 1fr;text-align:center}
  .footer-col a{justify-content:center}
}