/* Stargate — scoped verze pro zionterranova.com
   Původní: public_html/stargate.css z newearth.cz
   Performance: contain, content-visibility, translate3d, will-change
*/

/* ════ WRAPPER — off-screen skip ════ */
.stargate-wrap {
  --gate-offset-y: 0vmin;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: #000;
  background-image: url(/stargate/nebula.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Kulatý — ne čtverec (overflow hidden by ořízl chevrony) */
  border-radius: 50%;
  /* Container queries — glyph/chevron sizes scale with container */
  container-type: inline-size;
  container-name: stargate;
}

/* ════ GATE — metalický kruh ════ */
.stargate-wrap .gate {
  opacity: 0.35;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  position: absolute;
  margin: 0 auto;
  left: 50%;
  top: calc(50% + var(--gate-offset-y));
  transform: translate3d(-50%, -50%, 0);
  z-index: 0;
  background-image: radial-gradient(circle at center, #000 0%, hsl(0,0%,0%) 54%, #7e7f81 54%, #7e7f81 56%, hsl(216,1%,55%) 56%, hsl(216,1%,55%) 63%, #727374 63%, #727374 65%, #7e7f81 65%, #656667 75%);
}

/* ════ CONTAINER — drží rotující vrstvy ════ */
.stargate-wrap .container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
}

/* ════ CENTER LOGO ════ */
.stargate-wrap .container .center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 15%;
  height: 15%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 10;
  display: inline-block;
  box-shadow: 0 0 12px rgba(0,0,0,0.35);
}
.stargate-wrap .container .center-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ════ GATE SHADOW ════ */
.stargate-wrap .gate:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) rotateX(-80deg);
  width: 40%;
  height: 40%;
  border-radius: 100%;
  background: rgba(0,0,0,0.15);
  box-shadow: 0 0 40cqw 20cqw rgba(0,0,0,0.15);
}

/* ════ GLYPHS ════ */
.stargate-wrap .glyphs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: spin 10s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.stargate-wrap .gate:hover > .glyphs {
  animation-play-state: running;
}

.stargate-wrap .glyph {
  font-family: "Stargate SG-1 Address Glyphs", monospace;
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 43%;
  transform-origin: center bottom;
  font-size: 3.20cqw;
  text-align: center;
  width: 6.5%;
  /* Font není dostupný — skryj text, nech jen dekorativní :before čáru */
  color: transparent;
  text-shadow: none;
}

/* 39 glyph rotations */
.stargate-wrap .glyph:nth-of-type(39n+1) { transform: translateX(-50%) rotate(0deg); }
.stargate-wrap .glyph:nth-of-type(39n+2) { transform: translateX(-50%) rotate(9.2307692308deg); }
.stargate-wrap .glyph:nth-of-type(39n+3) { transform: translateX(-50%) rotate(18.4615384615deg); }
.stargate-wrap .glyph:nth-of-type(39n+4) { transform: translateX(-50%) rotate(27.6923076923deg); }
.stargate-wrap .glyph:nth-of-type(39n+5) { transform: translateX(-50%) rotate(36.9230769231deg); }
.stargate-wrap .glyph:nth-of-type(39n+6) { transform: translateX(-50%) rotate(46.1538461538deg); }
.stargate-wrap .glyph:nth-of-type(39n+7) { transform: translateX(-50%) rotate(55.3846153846deg); }
.stargate-wrap .glyph:nth-of-type(39n+8) { transform: translateX(-50%) rotate(64.6153846154deg); }
.stargate-wrap .glyph:nth-of-type(39n+9) { transform: translateX(-50%) rotate(73.8461538462deg); }
.stargate-wrap .glyph:nth-of-type(39n+10) { transform: translateX(-50%) rotate(83.0769230769deg); }
.stargate-wrap .glyph:nth-of-type(39n+11) { transform: translateX(-50%) rotate(92.3076923077deg); }
.stargate-wrap .glyph:nth-of-type(39n+12) { transform: translateX(-50%) rotate(101.5384615385deg); }
.stargate-wrap .glyph:nth-of-type(39n+13) { transform: translateX(-50%) rotate(110.7692307692deg); }
.stargate-wrap .glyph:nth-of-type(39n+14) { transform: translateX(-50%) rotate(120deg); }
.stargate-wrap .glyph:nth-of-type(39n+15) { transform: translateX(-50%) rotate(129.2307692308deg); }
.stargate-wrap .glyph:nth-of-type(39n+16) { transform: translateX(-50%) rotate(138.4615384615deg); }
.stargate-wrap .glyph:nth-of-type(39n+17) { transform: translateX(-50%) rotate(147.6923076923deg); }
.stargate-wrap .glyph:nth-of-type(39n+18) { transform: translateX(-50%) rotate(156.9230769231deg); }
.stargate-wrap .glyph:nth-of-type(39n+19) { transform: translateX(-50%) rotate(166.1538461538deg); }
.stargate-wrap .glyph:nth-of-type(39n+20) { transform: translateX(-50%) rotate(175.3846153846deg); }
.stargate-wrap .glyph:nth-of-type(39n+21) { transform: translateX(-50%) rotate(184.6153846154deg); }
.stargate-wrap .glyph:nth-of-type(39n+22) { transform: translateX(-50%) rotate(193.8461538462deg); }
.stargate-wrap .glyph:nth-of-type(39n+23) { transform: translateX(-50%) rotate(203.0769230769deg); }
.stargate-wrap .glyph:nth-of-type(39n+24) { transform: translateX(-50%) rotate(212.3076923077deg); }
.stargate-wrap .glyph:nth-of-type(39n+25) { transform: translateX(-50%) rotate(221.5384615385deg); }
.stargate-wrap .glyph:nth-of-type(39n+26) { transform: translateX(-50%) rotate(230.7692307692deg); }
.stargate-wrap .glyph:nth-of-type(39n+27) { transform: translateX(-50%) rotate(240deg); }
.stargate-wrap .glyph:nth-of-type(39n+28) { transform: translateX(-50%) rotate(249.2307692308deg); }
.stargate-wrap .glyph:nth-of-type(39n+29) { transform: translateX(-50%) rotate(258.4615384615deg); }
.stargate-wrap .glyph:nth-of-type(39n+30) { transform: translateX(-50%) rotate(267.6923076923deg); }
.stargate-wrap .glyph:nth-of-type(39n+31) { transform: translateX(-50%) rotate(276.9230769231deg); }
.stargate-wrap .glyph:nth-of-type(39n+32) { transform: translateX(-50%) rotate(286.1538461538deg); }
.stargate-wrap .glyph:nth-of-type(39n+33) { transform: translateX(-50%) rotate(295.3846153846deg); }
.stargate-wrap .glyph:nth-of-type(39n+34) { transform: translateX(-50%) rotate(304.6153846154deg); }
.stargate-wrap .glyph:nth-of-type(39n+35) { transform: translateX(-50%) rotate(313.8461538462deg); }
.stargate-wrap .glyph:nth-of-type(39n+36) { transform: translateX(-50%) rotate(323.0769230769deg); }
.stargate-wrap .glyph:nth-of-type(39n+37) { transform: translateX(-50%) rotate(332.3076923077deg); }
.stargate-wrap .glyph:nth-of-type(39n+38) { transform: translateX(-50%) rotate(341.5384615385deg); }
.stargate-wrap .glyph:nth-of-type(39n+39) { transform: translateX(-50%) rotate(350.7692307692deg); }

.stargate-wrap .glyph:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 11%;
  border-right: 1px solid #7e7f81;
  transform: translateY(-28%) rotate(4.6153846154deg);
}

/* ════ CHEVRONS ════ */
.stargate-wrap .chevrons, .stargate-wrap .chevronInners {
  position: absolute;
  top: -1%;
  left: -1%;
  width: 102%;
  height: 102%;
  border-radius: 100%;
  overflow: hidden;
}

.stargate-wrap .chevron, .stargate-wrap .chevronInner {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 16cqw;
  transform-origin: center bottom;
  border: 6cqw transparent solid;
  border-bottom: 52cqw transparent solid;
  border-top: 10cqw #909192 solid;
  filter: drop-shadow(0 1cqw 1cqw rgba(0,0,0,0.2));
}

.stargate-wrap .chevron:nth-of-type(9n+1), .stargate-wrap .chevronInner:nth-of-type(9n+1) { transform: translateX(-50%) rotate(0deg); }
.stargate-wrap .chevron:nth-of-type(9n+2), .stargate-wrap .chevronInner:nth-of-type(9n+2) { transform: translateX(-50%) rotate(40deg); }
.stargate-wrap .chevron:nth-of-type(9n+3), .stargate-wrap .chevronInner:nth-of-type(9n+3) { transform: translateX(-50%) rotate(80deg); }
.stargate-wrap .chevron:nth-of-type(9n+4), .stargate-wrap .chevronInner:nth-of-type(9n+4) { transform: translateX(-50%) rotate(120deg); }
.stargate-wrap .chevron:nth-of-type(9n+5), .stargate-wrap .chevronInner:nth-of-type(9n+5) { transform: translateX(-50%) rotate(160deg); }
.stargate-wrap .chevron:nth-of-type(9n+6), .stargate-wrap .chevronInner:nth-of-type(9n+6) { transform: translateX(-50%) rotate(200deg); }
.stargate-wrap .chevron:nth-of-type(9n+7), .stargate-wrap .chevronInner:nth-of-type(9n+7) { transform: translateX(-50%) rotate(240deg); }
.stargate-wrap .chevron:nth-of-type(9n+8), .stargate-wrap .chevronInner:nth-of-type(9n+8) { transform: translateX(-50%) rotate(280deg); }
.stargate-wrap .chevron:nth-of-type(9n+9), .stargate-wrap .chevronInner:nth-of-type(9n+9) { transform: translateX(-50%) rotate(320deg); }

.stargate-wrap .chevron:before, .stargate-wrap .chevronInner:before,
.stargate-wrap .chevron:after, .stargate-wrap .chevronInner:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4.40cqw;
  background: hsl(180, 83%, 39%);
  box-shadow: 0 0 1.60cqw hsl(0,0%,100%) inset, 0 0 1.60cqw hsl(0,0%,100%);
  width: 100%;
  height: 4cqw;
  transform: translateX(2.40cqw) skewX(-30deg);
}
.stargate-wrap .chevron:after, .stargate-wrap .chevronInner:after {
  transform: translateX(-2.40cqw) skewX(30deg);
}

.stargate-wrap .chevronInners {
  top: -2%;
  left: -2%;
  width: 104%;
  height: 104%;
}

.stargate-wrap .chevronInner {
  width: 12cqw;
  border-left-width: 5cqw;
  border-right-width: 5cqw;
  border-bottom-width: 55cqw;
  filter: drop-shadow(0 1cqw 0 #727374);
}
.stargate-wrap .chevronInner:before {
  left: 50%;
  width: 230%;
  bottom: 5.60cqw;
  transform: translateX(-50%);
  border-radius: 0.80cqw;
}
.stargate-wrap .chevronInner:after { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ════ ROTUJÍCÍ VRSTVY — performance ════ */
.stargate-wrap .gate img {
  width: 35%;
  height: auto;
  position: absolute;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  /* GPU compositing */
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none;
  --img-scale: 1.46;
}

.stargate-wrap .rotate23, .stargate-wrap .rotate24, .stargate-wrap .rotate25,
.stargate-wrap .rotate26, .stargate-wrap .rotate27, .stargate-wrap .rotate28 {
  --img-scale: 1.64;
}

@media (min-width: 1200px) {
  .stargate-wrap .gate img { --img-scale: 1.54; }
  .stargate-wrap .rotate23, .stargate-wrap .rotate24, .stargate-wrap .rotate25,
  .stargate-wrap .rotate26, .stargate-wrap .rotate27, .stargate-wrap .rotate28 { --img-scale: 1.74; }
}

/* ════ KEYFRAMES — translate3d pro GPU ════ */
@keyframes rotate-right {
  from { transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(var(--img-scale, 1)); }
  to   { transform: translate3d(-50%, -50%, 0) rotate(360deg) scale(var(--img-scale, 1)); }
}
@keyframes rotate-left {
  from { transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(var(--img-scale, 1)); }
  to   { transform: translate3d(-50%, -50%, 0) rotate(-360deg) scale(var(--img-scale, 1)); }
}

/* ════ 28 ROTATE LAYERS ════ */
.stargate-wrap .rotate1 { width: 90%; opacity: 0.8; animation: rotate-right 33s linear infinite; z-index: 1; }
.stargate-wrap .rotate2 { width: 60%; opacity: 0.8; animation: rotate-left 33792s linear infinite; }
.stargate-wrap .rotate3 { width: 70%; opacity: 0.9; animation: rotate-right 66s linear infinite; }
.stargate-wrap .rotate4 { width: 60%; opacity: 0.9; animation: rotate-left 16896s linear infinite; }
.stargate-wrap .rotate5 { width: 70%; opacity: 1; animation: rotate-right 132s linear infinite; }
.stargate-wrap .rotate6 { width: 60%; opacity: 1; animation: rotate-left 8448s linear infinite; }
.stargate-wrap .rotate7 { width: 70%; opacity: 0.7; animation: rotate-right 264s linear infinite; }
.stargate-wrap .rotate8 { width: 60%; opacity: 0.7; animation: rotate-left 4224s linear infinite; }
.stargate-wrap .rotate9 { width: 70%; opacity: 0.6; animation: rotate-right 528s linear infinite; }
.stargate-wrap .rotate10 { width: 60%; opacity: 0.6; animation: rotate-left 2112s linear infinite; }
.stargate-wrap .rotate11 { width: 60%; opacity: 0.5; animation: rotate-right 1056s linear infinite; }
.stargate-wrap .rotate12 { width: 60%; opacity: 0.5; animation: rotate-left 1056s linear infinite; }
.stargate-wrap .rotate13 { width: 60%; opacity: 0.45; animation: rotate-right 2112s linear infinite; }
.stargate-wrap .rotate14 { width: 70%; opacity: 0.45; animation: rotate-left 528s linear infinite; }
.stargate-wrap .rotate15 { width: 60%; opacity: 0.7; animation: rotate-right 4224s linear infinite; }
.stargate-wrap .rotate16 { width: 70%; opacity: 0.7; animation: rotate-left 264s linear infinite; }
.stargate-wrap .rotate17 { width: 60%; opacity: 0.35; animation: rotate-right 8448s linear infinite; }
.stargate-wrap .rotate18 { width: 70%; opacity: 0.35; animation: rotate-left 132s linear infinite; }
.stargate-wrap .rotate19 { width: 60%; opacity: 0.3; animation: rotate-right 16896s linear infinite; }
.stargate-wrap .rotate20 { width: 70%; opacity: 0.3; animation: rotate-left 66s linear infinite; }
.stargate-wrap .rotate21 { width: 60%; opacity: 0.2; animation: rotate-right 33792s linear infinite; }
.stargate-wrap .rotate22 { width: 70%; opacity: 0.2; animation: rotate-left 33s linear infinite; }
.stargate-wrap .rotate23 { width: 100%; opacity: 0.1; animation: rotate-left 33s linear infinite; }
.stargate-wrap .rotate24 { width: 100%; opacity: 0.1; animation: rotate-right 128s linear infinite; }
.stargate-wrap .rotate25 { width: 100%; opacity: 0.1; animation: rotate-left 256s linear infinite; }
.stargate-wrap .rotate26 { width: 100%; opacity: 0.1; animation: rotate-right 256s linear infinite; }
.stargate-wrap .rotate27 { width: 100%; opacity: 0.1; animation: rotate-left 128s linear infinite; }
.stargate-wrap .rotate28 { width: 100%; opacity: 0.1; animation: rotate-right 33s linear infinite; }

/* ════ MOBILE ════ */
@media (max-width: 768px) {
  .stargate-wrap .gate { width: min(100vmin, 92vw); }
  .stargate-wrap { --gate-offset-y: 4vmin; }
  .stargate-wrap .gate img { --img-scale: 1.46; }
  .stargate-wrap .rotate23, .stargate-wrap .rotate24, .stargate-wrap .rotate25,
  .stargate-wrap .rotate26, .stargate-wrap .rotate27, .stargate-wrap .rotate28 { --img-scale: 1.64; }
  .stargate-wrap .rotate1 { width: 110%; }
  .stargate-wrap .rotate2 { width: 80%; }
  .stargate-wrap .rotate3 { width: 95%; }
  .stargate-wrap .rotate4 { width: 80%; }
  .stargate-wrap .rotate5 { width: 95%; }
  .stargate-wrap .rotate6 { width: 80%; }
  .stargate-wrap .rotate7 { width: 95%; }
  .stargate-wrap .rotate8 { width: 80%; }
  .stargate-wrap .rotate9 { width: 95%; }
  .stargate-wrap .rotate10 { width: 80%; }
  .stargate-wrap .rotate11 { width: 80%; }
  .stargate-wrap .rotate12 { width: 80%; }
  .stargate-wrap .rotate13 { width: 80%; }
  .stargate-wrap .rotate14 { width: 95%; }
  .stargate-wrap .rotate15 { width: 80%; }
  .stargate-wrap .rotate16 { width: 95%; }
  .stargate-wrap .rotate17 { width: 80%; }
  .stargate-wrap .rotate18 { width: 95%; }
  .stargate-wrap .rotate19 { width: 80%; }
  .stargate-wrap .rotate20 { width: 95%; }
  .stargate-wrap .rotate21 { width: 80%; }
  .stargate-wrap .rotate22 { width: 95%; }
  .stargate-wrap .rotate23 { width: 120%; }
  .stargate-wrap .rotate24 { width: 120%; }
  .stargate-wrap .rotate25 { width: 120%; }
  .stargate-wrap .rotate26 { width: 120%; }
  .stargate-wrap .rotate27 { width: 120%; }
  .stargate-wrap .rotate28 { width: 120%; }
  .stargate-wrap .container .center-logo { width: 360px; height: 360px; }
}

@media (max-width: 480px) {
  .stargate-wrap .gate { width: min(110vmin, 96vw); }
  .stargate-wrap { --gate-offset-y: 6vmin; }
  .stargate-wrap .gate img { --img-scale: 1.58; }
  .stargate-wrap .rotate23, .stargate-wrap .rotate24, .stargate-wrap .rotate25,
  .stargate-wrap .rotate26, .stargate-wrap .rotate27, .stargate-wrap .rotate28 { --img-scale: 1.81; }
  .stargate-wrap .rotate1 { width: 120%; }
  .stargate-wrap .rotate2 { width: 85%; }
  .stargate-wrap .rotate3 { width: 100%; }
  .stargate-wrap .rotate4 { width: 85%; }
  .stargate-wrap .rotate5 { width: 100%; }
  .stargate-wrap .rotate6 { width: 85%; }
  .stargate-wrap .rotate7 { width: 100%; }
  .stargate-wrap .rotate8 { width: 85%; }
  .stargate-wrap .rotate9 { width: 100%; }
  .stargate-wrap .rotate10 { width: 85%; }
  .stargate-wrap .rotate11 { width: 85%; }
  .stargate-wrap .rotate12 { width: 85%; }
  .stargate-wrap .rotate13 { width: 85%; }
  .stargate-wrap .rotate14 { width: 100%; }
  .stargate-wrap .rotate15 { width: 85%; }
  .stargate-wrap .rotate16 { width: 100%; }
  .stargate-wrap .rotate17 { width: 85%; }
  .stargate-wrap .rotate18 { width: 100%; }
  .stargate-wrap .rotate19 { width: 85%; }
  .stargate-wrap .rotate20 { width: 100%; }
  .stargate-wrap .rotate21 { width: 85%; }
  .stargate-wrap .rotate22 { width: 100%; }
  .stargate-wrap .rotate23 { width: 130%; }
  .stargate-wrap .rotate24 { width: 130%; }
  .stargate-wrap .rotate25 { width: 130%; }
  .stargate-wrap .rotate26 { width: 130%; }
  .stargate-wrap .rotate27 { width: 130%; }
  .stargate-wrap .rotate28 { width: 130%; }
  .stargate-wrap .container .center-logo { width: 19%; height: 19%; }
}

/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion: reduce) {
  .stargate-wrap .glyphs,
  .stargate-wrap .gate img[class*="rotate"],
  .stargate-wrap .chevron,
  .stargate-wrap .chevronInner {
    animation: none !important;
    transition: none !important;
  }
}