:root{
  --bg:#000;
  --text: rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.84);
  --glow: rgba(160, 200, 255, .85);
  --raveA: rgba(255, 60, 190, .28);
  --raveB: rgba(0, 255, 214, .22);
  --raveC: rgba(120, 180, 255, .20);
  --radius: 18px;
  --max: 1080px;
  --shadow: 0 22px 70px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  overflow-x:hidden;
}

/* Starfield canvas */
#starfield{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  display:block;
  background:
    radial-gradient(900px 600px at 60% 30%, rgba(70,90,130,.22), transparent 60%),
    radial-gradient(800px 500px at 25% 70%, rgba(70,120,160,.16), transparent 60%),
    #000;
  transition: opacity .25s ease;
}
#starfield.is-off{ opacity: 0; }

/* Vignette */
.vignette{
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index:-2;
  background: radial-gradient(1200px 700px at 50% 40%, transparent 55%, rgba(0,0,0,.70) 100%);
  transition: opacity 900ms ease;
  opacity: 1;
}
body.is-drifting .vignette{ opacity: .92; }

/* Rave pulse */
.rave-pulse{
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index:-1;
  opacity:.85;
  background:
    radial-gradient(900px 480px at 20% 30%, var(--raveA), transparent 60%),
    radial-gradient(800px 460px at 80% 40%, var(--raveB), transparent 60%),
    radial-gradient(900px 520px at 50% 95%, var(--raveC), transparent 60%);
  filter: blur(22px);
  animation: pulse 6.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity:.70; }
  50%{ transform: scale(1.03); opacity:.95; }
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
}

header{
  padding: 44px 0 10px;
  text-align:center;
  position: relative;
  overflow: visible;
  z-index: 60;
}

/* Earth layer */
.earthBand{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
      align-content: center;
  isolation: isolate;
  overflow: hidden;
  transition: transform 1200ms cubic-bezier(.18,.9,.2,1), filter 1200ms cubic-bezier(.18,.9,.2,1);
}
body.is-drifting .earthBand{ transform: scale(.985); filter: saturate(.96); }

.earthBand .earthShade{
  position:absolute;
  inset: 0;
  background: radial-gradient(900px 700px at 50% 45%, rgba(0,0,0,.12), rgba(0,0,0,.62) 74%, rgba(0,0,0,.86) 100%);
  z-index: 4;
  pointer-events:none;
}
.earthBand::before{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(900px 800px at 50% 48%,
    rgba(0,255,214,.08),
    rgba(120,180,255,.06) 42%,
    rgba(255,60,190,.04) 60%,
    rgba(0,0,0,0) 76%);
  filter: blur(34px);
  opacity: .9;
  z-index: 1;
}
.earthBand::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(104vmin, 1140px);
  height: min(104vmin, 1140px);
  border-radius: 999px;
  z-index: 6;
  pointer-events:none;
  background:
    radial-gradient(circle at 52% 52%,
      rgba(0,0,0,0) 56%,
      rgba(0,255,214,.18) 60%,
      rgba(120,180,255,.13) 63%,
      rgba(255,60,190,.10) 66%,
      rgba(0,0,0,0) 73%),
    radial-gradient(circle at 46% 54%,
      rgba(0,0,0,0) 58%,
      rgba(130,255,120,.12) 62%,
      rgba(0,255,214,.12) 64%,
      rgba(0,0,0,0) 73%);
  filter: blur(16px);
  mix-blend-mode: screen;
  opacity: .85;
  animation: auroraFlow 9s ease-in-out infinite;
}
@keyframes auroraFlow{
  0%,100%{ transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity: .72; filter: blur(16px); }
  45%{ transform: translate(-50%,-50%) rotate(6deg) scale(1.01); opacity: .92; filter: blur(14px); }
  70%{ transform: translate(-50%,-50%) rotate(-4deg) scale(1.015); opacity: .84; filter: blur(17px); }
}

/* Lens flare sweep */
.flare{
  position:absolute;
  inset:-25%;
  z-index: 7;
  pointer-events:none;
  opacity: 0;
  mix-blend-mode: screen;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.14) 44%,
    rgba(160,200,255,.22) 50%,
    rgba(255,60,190,.10) 56%,
    rgba(255,255,255,0) 68%);
  filter: blur(2px);
  transform: translateX(-40%) rotate(8deg);
}
.flare.play{ animation: flareSweep 780ms cubic-bezier(.18,.9,.2,1) forwards; }
@keyframes flareSweep{
  0%   { opacity: 0; transform: translateX(-55%) rotate(8deg) scale(1); }
  15%  { opacity: .75; }
  55%  { opacity: .55; }
  100% { opacity: 0; transform: translateX(55%) rotate(8deg) scale(1.02); }
}

/* Home-only: Earth hyperspace arrival (wrapper scales in, image can keep subtle dilation) */
.earthWrap{
  position: relative;
  display: grid;
  place-items: center;
      align-content: center;
  z-index: 3;
  pointer-events: none; /* keep nav taps safe on mobile */
  transform: scale(.08);
  opacity: 0;
  filter: saturate(1.05);
}
body.home-ready .earthWrap{
  animation: earthArrive 1250ms cubic-bezier(.14,.92,.18,1) forwards;
}
@keyframes earthArrive{
  0%   { transform: scale(.08); opacity: 0; }
  55%  { transform: scale(1.06); opacity: 1; }
  72%  { transform: scale(.98); }
  88%  { transform: scale(1.02); }
  100% { transform: scale(1.00); opacity: 1; }
}

/* Earth/studio image */
.earth{
  position: relative;
  /* Responsive sizing: keep the Earth comfortably within the visible viewport */
  width: min(92vmin, 920px);
  height: min(92vmin, 920px);
  /* Prevent the circle from crowding the header/nav on shorter screens */
  max-width: calc(100vh - 170px);
  max-height: calc(100vh - 170px);
  object-fit: cover;
  border-radius: 999px;
  /* Tighter circular mask: crop closer to the blue Earth edge */
  -webkit-mask-image: radial-gradient(circle at center,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,0.92) 70%,
        rgba(0,0,0,0.35) 82%,
        rgba(0,0,0,0) 90%);
          mask-image: radial-gradient(circle at center,
        rgba(0,0,0,1) 60%,
        rgba(0,0,0,0.92) 70%,
        rgba(0,0,0,0.35) 82%,
        rgba(0,0,0,0) 90%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: center;
          mask-position: center;
  clip-path: circle(50% at 50% 50%);
  z-index: 3;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.03),
    0 0 24px rgba(0,255,214,.14),
    0 0 48px rgba(120,180,255,.10),
    0 0 90px rgba(255,60,190,.05);
  filter: brightness(.96) contrast(1.03) saturate(1.05);
  opacity: 1;
  animation: earthDilation 6s ease-in-out infinite;
  transform-origin: center;
  transition:
    opacity .42s ease,
    filter .42s ease,
    border-radius 1.35s cubic-bezier(.18,.9,.2,1),
    clip-path 1.35s cubic-bezier(.18,.9,.2,1);
}


/* Page-home: extra light zoom+bounce on the Earth image (GPU-friendly transforms) */
body.page-home .earth{
  will-change: transform;
}
body.page-home.home-ready .earth{
  animation:
    earthIntroZoom 1150ms cubic-bezier(.14,.92,.18,1) 1,
    earthDilation 6s ease-in-out 1150ms infinite;
}
@keyframes earthIntroZoom{
  0%   { transform: scale(.92); }
  55%  { transform: scale(1.035); }
  72%  { transform: scale(.995); }
  88%  { transform: scale(1.01); }
  100% { transform: scale(1.0); }
}
@media (prefers-reduced-motion: reduce){
  body.page-home.home-ready .earth{ animation: none !important; }
}

@keyframes earthDilation{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.005); }
}
.earth.is-studio{
  -webkit-mask-image: none !important;
          mask-image: none !important;
  animation: none;
}
.earth.is-studio.is-full{
  clip-path: inset(0 round 18px);
  border-radius: 18px;
}

/* Title */
.title{
  margin: 0;
  font-family: "Times New Roman", Times, serif;
  font-weight: 900;
  letter-spacing: .25em;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  color: #fff;
  text-transform: uppercase;
  text-shadow:
    0 0 12px rgba(0,0,0,.75),
    0 0 12px rgba(255,255,255,.28),
    0 0 26px var(--glow),
    0 0 56px rgba(120, 180, 255, .28);
  transform: translate3d(0, 0, -900px) scale(.22);
  filter: blur(2px);
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: titleFlyIn 1150ms cubic-bezier(.12, .9, .2, 1) 120ms forwards;
  position: relative;
  z-index: 3;
}
@keyframes titleFlyIn{
  0%   { transform: translate3d(0, 0, -900px) scale(.22); opacity: 0; filter: blur(2.5px); }
  55%  { transform: translate3d(0, 0, 0) scale(1.08); opacity: 1; filter: blur(.2px); }
  72%  { transform: translate3d(0, 0, 0) scale(.97); }
  86%  { transform: translate3d(0, 0, 0) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) scale(1.00); opacity: 1; filter: blur(0); }
}

/* Navigation */
.nav{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  padding: 14px 0 4px;
  /* Keep nav above fixed center effects (mobile tap friendliness) */
  position: relative;
  z-index: 10;
}
.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.70);
  color: rgba(255,255,255,.95);
  text-decoration:none;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.nav a:hover{
  transform: translateY(-1px);
  background: rgba(20,20,24,.80);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}
.nav a[aria-current="page"]{
  border-color: rgba(160,200,255,.30);
  box-shadow: 0 0 0 1px rgba(160,200,255,.22), 0 0 22px rgba(120,180,255,.16);
}

/* Controls top-left */
.controls{
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 50;
  display: grid;
  gap: 10px;
  justify-items: start;
}
.sfToggle{ display:grid; justify-items:start; gap:6px; user-select:none; }
.sfRow{ display:flex; align-items:center; gap:10px; }
.sfLabel{
  font-size: .78rem;
  color: rgba(255,255,255,.82);
  letter-spacing: .02em;
  line-height: 1.1;
  padding-left: 2px;
  text-shadow: 0 10px 30px rgba(0,0,0,.65);
}
.switch{
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.14);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.switch::after{
  content:"";
  position:absolute;
  top: 50%;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transition: left .18s ease, transform .18s ease;
}
.switch[aria-checked="true"]{
  background: rgba(120,180,255,.26);
  border-color: rgba(160,200,255,.22);
}
.switch[aria-checked="true"]::after{ left: 22px; }
.switch:active::after{ transform: translateY(-50%) scale(.96); }

#jumpBtnTop{
  width: fit-content;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(160,200,255,.22);
  background: linear-gradient(135deg, rgba(0,0,0,.40), rgba(120,180,255,.12));
  color: rgba(255,255,255,.92);
  cursor: pointer;
  font-size: .78rem;
  letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  box-shadow: 0 0 0 1px rgba(160,200,255,.2), 0 0 22px rgba(120,180,255,.16);
  transition: transform .15s ease, box-shadow .2s ease;
}
#jumpBtnTop:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(160,200,255,.22),
    0 0 18px rgba(120,180,255,.20),
    0 0 34px rgba(255,60,190,.10);
}
#jumpBtnTop:active{ transform: translateY(1px) scale(0.99); }

/* Content */
main{ padding: 14px 0 52px; position: relative; z-index: 10; }

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.card{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: rgba(0,0,0,.34);
  box-shadow: var(--shadow);
  padding: 18px;
  backdrop-filter: blur(10px);
  overflow:hidden;
}
.card.span2{ grid-column: 1 / -1; }

h2{
  margin: 0 0 10px;
  font-size: 1.25rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.98);
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
p{ margin: 0 0 12px; color: var(--muted); text-shadow: 0 2px 10px rgba(0,0,0,.55); }

.btnRow{ display:flex; gap:10px; flex-wrap:wrap; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.72);
  color: rgba(255,255,255,.95);
  text-decoration:none;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(20,20,24,.80);
  border-color: rgba(255,255,255,.24);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}
.btn.dsp{
  border-color: rgba(160,200,255,.26);
}
.btn.dsp:hover{
  box-shadow:
    0 0 0 1px rgba(160,200,255,.26),
    0 0 22px rgba(120,180,255,.22),
    0 0 40px rgba(255,60,190,.12);
}

.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gallery a{
  display:block;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.40);
}
.gallery img{ width:100%; height:220px; object-fit:cover; display:block; }

@media (max-width: 920px){
  .grid{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr 1fr; }
  .earth{
    width: min(90vmin, 860px);
    height: min(90vmin, 860px);
    max-width: calc(100vh - 160px);
    max-height: calc(100vh - 160px);
  }
}

/* Extra help for very short viewports (landscape phones) */
@media (max-height: 720px){
  .earth{
    width: min(84vmin, 780px);
    height: min(84vmin, 780px);
    max-width: calc(100vh - 150px);
    max-height: calc(100vh - 150px);
  }
}

footer{
  position: relative;
  z-index: 10;
  padding: 20px 0 34px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.70);
  text-align:center;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}


/* Layout: keep footer at bottom */
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main{ flex: 1 0 auto; }
footer{ margin-top: auto; padding: 18px 0 22px; }

/* Nav: star toggle + store image + lightspeed */
.nav{
  align-items: center;
}
.sfNavToggle{
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px 10px 2px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.70);
}
.sfNavToggle .sfLabel{
  font-size: 12px;
  opacity: .85;
  letter-spacing: .02em;
}
.nav a.navStore{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 78px;
  height: 40px;
  padding: 0 !important;
  border-radius: 14px;
  background: transparent url('../img/store1.png') center/90% 90% no-repeat !important;
  border: 1px solid rgba(255,255,255,.18);
}
.nav a.navStore:hover{
  background-color: rgba(20,20,24,.55);
}
.nav a.navStore[aria-current="page"]{
  border-color: rgba(160,200,255,.30);
  box-shadow: 0 0 0 1px rgba(160,200,255,.22), 0 0 22px rgba(120,180,255,.16);
}
.navLightspeed{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(120,180,255,.12);
  color: rgba(255,255,255,.95);
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.navLightspeed:hover{
  background: rgba(120,180,255,.18);
  box-shadow: 0 0 0 1px rgba(160,200,255,.14);
}

/* Lite mode for older OS/browsers */
.iono-legacy .rave-pulse{ display:none; }


/* Gallery lightbox */
.ionoLightbox{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
      align-content: center;
  background: rgba(0,0,0,.78);
  z-index: 80;
  padding: 18px;
}
.ionoLightbox.is-open{ display: grid; }
.ionoLightboxInner{
  position: relative;
  max-width: min(1100px, 96vw);
  max-height: 90vh;
}
.ionoLightboxInner img{
  display: block;
  max-width: 100%;
  max-height: 90vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow);
}
.ionoLightboxClose{
  position: absolute;
  top: -10px;
  right: -10px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.70);
  color: rgba(255,255,255,.95);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

/* --- Local counters (hidden until hover, bottom-left) --- */
.ionoCounterBadge{
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 9999;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: rgba(255,255,255,.86);
  opacity: 0.06;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: auto;
}
.ionoCounterBadge:hover{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ionoCounterBadge:before{
  content: "ⓘ";
  margin-right: 6px;
  opacity: .75;
}
.ionoCounterLine .k{ opacity: .78; margin-right: 4px; }
.ionoCounterLine .v{ opacity: .95; }

/* Download count appended to links (fades in on hover) */
a .dlCount{
  opacity: 0;
  transition: opacity .18s ease;
  color: rgba(255,255,255,.72);
  font-size: 12px;
}
a:hover .dlCount{ opacity: 1; }