/* ============================================================
   PORTAL GATE — halaman pembuka sebelum halaman utama
   Roda 4 musim = gerbang. Lubang di tengahnya membesar saat
   digeser ke atas sampai seluruh halaman utama terlihat.
   ============================================================ */

/* Posisi portal dihitung CSS (sama dengan perhitungan di JS), jadi teks
   tidak bergeser saat animasi mulai. dvh = tinggi layar yang benar-benar terlihat di HP. */
:root{
  --cy: 42vh;
  --ring: min(64vw, 40vh, 300px);
}
@supports (height: 1dvh){
  :root{
    --cy: 42dvh;
    --ring: min(64vw, 40dvh, 300px);
  }
}

.gate,
.gate-bg{ display: none; }

/* Gaya dasar gerbang — tidak bergantung style.css, supaya tampilan pertama tidak menunggu file lain */
html.gating body{
  margin: 0;
  background: #04050f;
  color: var(--text, #f3efe6);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.gate .season-bar{
  height: 4px;
  background: linear-gradient(90deg, #7c9885 0 25%, #d9a441 25% 50%, #c97064 50% 75%, #5b84a6 75% 100%);
}

html.gating,
html.gating body{
  overflow: hidden;
  overscroll-behavior: none;
  height: 100%;
}

html.gating .gate,
html.gating .gate-bg{ display: block; }

/* Halaman utama "di balik" gerbang: hanya terlihat lewat lubang portal */
html.gating #app{
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: var(--bg, #14181a);
  -webkit-clip-path: circle(var(--hole, 0px) at 50% var(--cy, 42vh));
  clip-path: circle(var(--hole, 0px) at 50% var(--cy, 42vh));
}

html.gating #app .wrap{
  transform: rotate(var(--app-r, 0rad)) scale(var(--app-s, 0.8));
  transform-origin: 50% var(--oy, 40vh);
  will-change: transform;
}

/* Latar galaksi di halaman utama (diredupkan supaya kartu tetap mudah dibaca).
   WebP (lebih kecil) kalau browser mendukung, JPG sebagai cadangan; versi kecil untuk HP. */
#app::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #0a0c16;
  background-image: linear-gradient(180deg, rgba(8,9,20,.38) 0%, rgba(8,9,20,.52) 55%, rgba(8,9,20,.7) 100%), url('galaxy.jpg');
  background-image: linear-gradient(180deg, rgba(8,9,20,.38) 0%, rgba(8,9,20,.52) 55%, rgba(8,9,20,.7) 100%), image-set(url('galaxy.webp') type('image/webp'), url('galaxy.jpg') type('image/jpeg'));
  background-position: 0 0, 50% 42%;
  background-size: auto, cover;
  background-repeat: no-repeat;
  filter: saturate(1.3);
  pointer-events: none;
}
@media (max-width: 760px){
  #app::before{
    background-image: linear-gradient(180deg, rgba(8,9,20,.38) 0%, rgba(8,9,20,.52) 55%, rgba(8,9,20,.7) 100%), url('galaxy-sm.jpg');
    background-image: linear-gradient(180deg, rgba(8,9,20,.38) 0%, rgba(8,9,20,.52) 55%, rgba(8,9,20,.7) 100%), image-set(url('galaxy-sm.webp') type('image/webp'), url('galaxy-sm.jpg') type('image/jpeg'));
  }
}

#app .hero{ text-shadow: 0 2px 16px rgba(3,4,12,.7); }

/* Kartu naik berurutan saat portal terbuka (0 offset di luar animasi) */
.card{
  translate: 0 calc((1 - var(--app-in, 1)) * (18px + var(--i, 0) * 12px));
}

.brand:focus{ outline: none; }

/* ---------- Latar gerbang: galaksi ---------- */
.gate-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #04050f;
}

/* Galaksi spiral berwarna — pusatnya tepat di belakang portal,
   berputar pelan dan ikut tersedot (mengecil + berpusar) saat digeser */
.gate-galaxy{
  position: absolute;
  left: calc(50% - 75vmax);
  top: calc(var(--cy, 42vh) - 75vmax);
  width: 150vmax;
  height: 150vmax;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
/* putaran pelan galaksi dijalankan browser sendiri (ringan, tidak membebani JavaScript) */
.gate-galaxy::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url('galaxy.jpg') center / cover no-repeat;
  background-image: image-set(url('galaxy.webp') type('image/webp'), url('galaxy.jpg') type('image/jpeg'));
  animation: gate-spin 630s linear infinite;
  will-change: transform;
}
@keyframes gate-spin{
  to{ transform: rotate(360deg); }
}
@media (max-width: 760px){
  .gate-galaxy::before{
    background-image: url('galaxy-sm.jpg');
    background-image: image-set(url('galaxy-sm.webp') type('image/webp'), url('galaxy-sm.jpg') type('image/jpeg'));
  }
}

/* sedikit gelap di tepi layar supaya teks tetap terbaca */
.gate-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 85% at 50% var(--cy, 42vh), rgba(4,5,15,0) 35%, rgba(4,5,15,.55) 100%);
  pointer-events: none;
}

.gate-sky{
  position: absolute;
  inset: 0;
}

.gate-halo{
  position: absolute;
  left: 50%;
  top: var(--cy, 42vh);
  width: var(--ring, 260px);
  height: var(--ring, 260px);
  margin-left: calc(var(--ring, 260px) / -2);
  margin-top: calc(var(--ring, 260px) / -2);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #7c9885 0 20%, #d9a441 30% 45%, #c97064 55% 70%, #5b84a6 80% 95%, #7c9885 100%);
  filter: blur(56px);
  opacity: 0;
  will-change: transform, opacity;
}

/* ---------- Lapisan interaksi ---------- */
.gate{
  position: fixed;
  inset: 0;
  z-index: 2;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
}

.gate:active{ cursor: grabbing; }

.gate .season-bar{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.gate canvas{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gate-ui{
  position: absolute;
  inset: 0;
  text-shadow: 0 1px 14px rgba(3,4,12,.8), 0 0 2px rgba(3,4,12,.6);
  pointer-events: none;
  opacity: var(--gate-text-a, 1);
  /* teks ikut tersedot: mengecil & berputar ke pusat portal */
  transform-origin: 50% var(--cy, 42vh);
  transform: rotate(var(--suck-r, 0rad)) scale(var(--suck-s, 1));
}

.gate-top{
  position: absolute;
  top: calc(22px + env(safe-area-inset-top, 0px));
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #9ca9a2);
  animation: gate-fade 0.9s 0.2s both;
}

.gate-title{
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(var(--cy, 42vh) + var(--ring, 260px) / 2 + 36px);
  text-align: center;
}

.gate-name{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(34px, 8.5vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text, #f3efe6);
  animation: gate-rise 1s 0.35s both;
}

.gate-date{
  margin: 10px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--text-muted, #9ca9a2);
  animation: gate-rise 1s 0.5s both;
}

.gate-hint{
  position: absolute;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  color: var(--text, #f3efe6);
  font: 500 14px/1.3 'Manrope', system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  animation: gate-fade 1s 0.9s both;
}

.gate-hint svg{
  width: 22px;
  height: 22px;
  color: var(--accent, #d9a441);
  animation: gate-bob 1.8s ease-in-out 1.6s infinite;
}

.gate-hint:focus-visible{
  outline: 2px solid var(--accent, #d9a441);
  outline-offset: 2px;
}

.gate-hint .hint-pointer{ display: none; }

@media (hover: hover) and (pointer: fine){
  .gate-hint .hint-touch{ display: none; }
  .gate-hint .hint-pointer{ display: inline; }
}

@keyframes gate-fade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* judul langsung terlihat (bukan muncul dari transparan) — hanya naik sedikit */
@keyframes gate-rise{
  from{ transform: translateY(14px); }
  to{ transform: none; }
}

@keyframes gate-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* HP posisi landscape / layar pendek */
@media (max-height: 520px){
  .gate-title{ top: calc(var(--cy, 42vh) + var(--ring, 200px) / 2 + 14px); }
  .gate-name{ font-size: 26px; }
  .gate-date{ display: none; }
  .gate-hint{ bottom: 8px; padding: 8px 16px; }
}

@media (prefers-reduced-motion: reduce){
  .gate,
  .gate *,
  .gate-galaxy::before{ animation: none !important; }
}

/* ---------- Form login di balik gerbang (kalau belum login) ---------- */
.login-inline{
  max-width: 400px;
}

.login-inline .login-note{
  color: var(--text-muted);
  font-size: 14px;
  margin: -8px 0 18px;
}