:root {
  --g1: #fff3b0;
  --g2: #f3c94d;
  --g3: #b8860b;
  --navy: #0b1530;
  --ink: #fdf3d0
}

* {
  box-sizing: border-box
}

html {
  min-height: 100%;
  background: #e8f1fb;
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font: 400 clamp(.9rem, 2.2vw, 1.2rem)/1.5 'Libre Baskerville', Georgia, serif;
  overflow-x: hidden;
  overflow-x: clip;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  background: linear-gradient(#6fa8e8, #e8f1fb);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

:focus-visible {
  outline: 2px solid var(--g2);
  outline-offset: 3px
}

/* Background video (nothing darkens it) */
#gate {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: opacity 5s ease
}

body.sky #gate {
  opacity: 0
}

#skip {
  position: fixed;
  top: max(.8rem, env(safe-area-inset-top));
  right: .8rem;
  z-index: 5;
  padding: .4rem .8rem;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 2rem;
  background: rgba(8, 16, 48, .45);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  cursor: pointer
}

#skip[hidden] {
  display: none
}

/* Gold glowing type */
.gold {
  background: linear-gradient(180deg, var(--g1), var(--g2) 30%, var(--g3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: Cinzel, serif;
  outline: 1px #000;
  filter: drop-shadow(0 1px 0 #000)
}

.hero {
  min-height: 100svh;
  padding: 11svh 1rem 0;
  text-align: center
}

.hero h2 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1.5rem, 5vw, 3rem);
  letter-spacing: .22em
}

.hero h1 {
  margin: .1em 0 0;
  font-weight: 900;
  font-size: clamp(2.6rem, 12vw, 7.5rem);
  letter-spacing: .07em;
  line-height: 1.1
}

.emerge {
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 2.6s ease, transform 2.6s ease
}

.emerge.on {
  opacity: 1;
  transform: none
}

/* Star rows: fly in from alternating sides, later the star turns into its text */
.stars {
  max-width: 48rem;
  margin: 0 auto;
  padding: 6svh 1.2rem 14svh
}

.row {
  display: grid;
  place-items: center;
  grid-template-rows: minmax(0, 1fr);   /* the row height is set by JS (main.js layout) */
  text-align: center;
  /* cursor: pointer; */
  opacity: 0;
  transform: translateX(110vw);
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity .4s
}

.row:nth-child(even) {
  transform: translateX(-110vw)
}

.row.in {
  opacity: 1;
  transform: none
}

.row>* {
  grid-area: 1/1;
  transition: opacity 1.2s, transform 1.2s
}

.star {
  width: min(7rem, 10svh);
  min-height: 9rem;
}

.star img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 0 14px rgba(255, 205, 70, .8));
  animation: pulse 2.4s ease-in-out infinite
}

@keyframes pulse {
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 24px rgba(255, 215, 90, 1))
  }
}

/* Gradient repeats every line (background-size = one line height), so long texts look equal on all lines */
.txt {
  --lh: 1.4;
  /* margin: 0; */
  font-weight: 600;
  font-size: clamp(1.6rem, 3.6vw, 2rem);
  line-height: var(--lh);
  background-size: 100% calc(var(--lh)*1em);
  background-repeat: repeat-y;
  opacity: 0;
  transform: scale(.85);
  visibility: hidden
}

.registry-row {
  margin-top: 50px;
}

.registry-row .txt {
  --lh: 1.2;
  font-size: clamp(1rem, 3.6vw, 1.5rem);
  font-style: italic;
}

.txt a {
  background: #000;
  -webkit-background-clip: text;
  text-decoration: underline;
  font-style: normal;
  font-size: clamp(1rem, 3.6vw, 1.5rem);
  filter: drop-shadow(0px 0.6px 0px black);
}

.row.open .star {
  opacity: 0;
  transform: rotate(180deg) scale(.2)
}

.row.open .txt {
  opacity: 1;
  transform: none;
  visibility: visible
}

/* Footer appears only when the whole intro has finished */
body.done footer {
  display: grid;
  animation: fade 2s ease
}

@keyframes fade {
  from {
    opacity: 0
  }
}

/* Page is not scrollable by hand during the intro; the animation scrolls it */
html.locked,
html.locked body {
  overflow: hidden;
  overscroll-behavior: none
}

/* Footer line: lily (info) + owl (code gate) */
footer {
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--navy);
  border-top: 2px solid var(--g3)
}

.panel {
  position: relative;
  min-height: 26rem;
  overflow: hidden;
  border: 0;
  padding: 0
}

.panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.owl {
  cursor: pointer;
  background: none
}

.owl img {
  object-position: 50% 35%
}

.info {
  position: relative;
  max-width: 26rem;
  height: 100%;
  padding: 1.5rem;
  font-size: .9rem;
  background: linear-gradient(90deg, rgba(8, 16, 48, .78), rgba(8, 16, 48, 0))
}

.info h3 {
  margin: .2rem 0;
  font-size: 1.2rem
}

.info p {
  margin: .2rem 0 1rem
}

.info a {
  color: var(--g1)
}

@media(max-width:700px) {
  footer {
    grid-template-columns: 1fr
  }

  .panel {
    min-height: 22rem
  }
}

/* Dialogs */
dialog {
  width: 92%;
  max-width: 30rem;
  padding: 1.4rem;
  border: 1px solid var(--g3);
  border-radius: .6rem;
  background: var(--navy);
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.8;
}

dialog::backdrop {
  background: rgba(3, 8, 24, .75);
  backdrop-filter: blur(4px)
}

dialog h3 {
  margin: 0 0 .5rem;
  font-size: 1.3rem
}

label {
  display: block;
  margin: .6rem 0 .2rem
}

input[type=text],
input[type=email],
input[type=password] {
  width: 100%;
  padding: .55rem;
  border: 1px solid var(--g3);
  border-radius: .4rem;
  background: #0f1d42;
  color: #fff;
  font: inherit
}

fieldset {
  margin: .8rem 0;
  padding: .3rem .8rem;
  border: 1px solid rgba(243, 201, 77, .35);
  border-radius: .4rem
}

fieldset label {
  margin: .3rem 0
}

.msg {
  min-height: 1.5em;
  margin: .6rem 0
}

.btn {
  padding: .55rem 1.1rem;
  border: 0;
  border-radius: 2rem;
  background: linear-gradient(180deg, var(--g1), var(--g2) 55%, var(--g3));
  color: #2a1c00;
  font: 700 1rem Cinzel, serif;
  cursor: pointer
}

.btn.ghost {
  background: none;
  border: 1px solid var(--g3);
  color: var(--ink)
}

.hp {
  position: absolute;
  left: -9999px
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition-duration: .01s !important
  }
}

/* Form buttons: spacing and wrapping on small screens */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1rem
}

.actions .btn {
  flex: 1 1 9rem
}

dialog {
  max-height: 92svh;
  overflow: auto
}

/* Spacer is phone-only (enabled in the phone block below) */
.runway {
  display: none
}

/* Phones: smaller stars, tighter rows, so 5-6 stars fit on one screen */
@media(max-width:700px) {
  .stars {
    padding: 2svh 1rem 16svh
  }

  /* texts sit higher on the screen while the intro scrolls (centered area is extended below the row) */
  .row {
    scroll-margin-bottom: 28svh
  }

  /* room below the last text so it can scroll up that high; gone once the footer appears */
  .runway {
    display: block;
    height: 40svh
  }

  .registry-row {
    margin-top: 1.8rem
  }

  .star {
    width: 3.6rem;
    min-height: 0
  }

  .txt {
    font-size: clamp(1.05rem, 4.6vw, 1.35rem);
    --lh: 1.3
  }
}

/* Phones held sideways */
@media(max-height:520px) {
  .hero {
    padding-top: 6svh
  }

  .star {
    width: 3.2rem;
    min-height: 0
  }


}

/* Scroll-down hint arrow: shows together with the footer */
.hint {
  display: none;
  margin: 1.5rem auto 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--g2);
  filter: drop-shadow(0 1px 0 #000)
}

.hint svg {
  display: block;
  width: 2.6rem;
  height: 2.6rem
}

body.done .hint {
  display: block;
  /* animation: fade 2s ease, bob 1.6s ease-in-out 2s infinite */
}

@keyframes bob {
  50% {
    transform: translateY(.6rem)
  }
}

body.done .runway {
  display: none
}

/* Rows shrink from star height to text height when they open (main.js sets the height),
   so every text gets exactly the same gap above it; only .registry-row is pushed lower on purpose */
.row:first-child {
  margin-top: 0
}

.row.open {
  min-height: 0
}

/* Registration dialog: no bottom buttons, no visible scrollbar.
   Vertical ZAVRIEŤ strip on the left, vertical POTVRDIŤ strip on the right. */
#reg {
  max-width: 34rem;
  padding: 0;
  overflow: hidden
}

#regForm {
  display: grid;
  grid-template-columns: auto 1fr auto
}

.form-body {
  padding: 1.3rem 1.2rem;
  max-height: 92svh;
  overflow: auto;
  scrollbar-width: none
}

.form-body::-webkit-scrollbar {
  display: none
}

.side {
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.8rem;
  padding: 1rem .4rem;
  border: 0;
  cursor: pointer;
  font: 800 1.1rem Cinzel, serif;
  letter-spacing: .35em;
  text-transform: uppercase
}

.side-close {
  transform: rotate(180deg);   /* reads bottom-to-top, mirroring the right strip */
  background: transparent;
  color: var(--ink);
  border-left: 1px solid var(--g3)   /* after the rotation this is the divider on its right edge */
}

.side-ok {
  background: linear-gradient(90deg, var(--g1), var(--g2) 50%, var(--g3));
  color: #2a1c00;
  border-left: 1px solid var(--g3)
}

@media(max-width:700px) {
  .side {
    min-width: 2.3rem;
    font-size: .9rem
  }

  .form-body {
    padding: 1rem .8rem
  }
}

/* Desktop (not phones): smaller stars. Row heights and text positions are set by main.js (layout). */
@media (min-width: 701px) {
  .star {
    display: grid;
    align-content: center;
    width: min(5.5rem, 9.5svh);
    min-height: 0
  }
}

/* ---- Modals: the page behind can't scroll; the registration form fits on phones without scrolling ---- */
html:has(dialog[open]),
html:has(dialog[open]) body {
  overflow: hidden;
  overscroll-behavior: none
}

dialog {
  overscroll-behavior: contain
}

@media (max-width: 700px) {
  /* everything inside is sized in em, so the whole form scales with the screen height and always fits */
  #reg {
    font-size: clamp(.68rem, 2.15svh, .88rem);
    line-height: 1.35
  }

  #reg .form-body {
    padding: .8em;
    max-height: none;
    overflow: visible
  }

  #reg h3 {
    font-size: 1.25em;
    margin: 0 0 .25em
  }

  #reg p {
    margin: .3em 0
  }

  #reg label {
    margin: .35em 0 .1em
  }

  #reg input[type=text],
  #reg input[type=email] {
    padding: .35em .5em
  }

  #reg fieldset {
    margin: .5em 0;
    padding: .1em .6em
  }

  #reg fieldset label {
    margin: .1em 0
  }

  #reg .msg {
    min-height: 1.2em;
    margin: .3em 0
  }

  #reg .side {
    font-size: 1.05em;
    min-width: 2.6em;
    padding: .8em .3em
  }
}

/* Last text: the gold + shadow sit on the two gold spans only, so the black TU link gets no shadow */
.registry-row .gold {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone
}

.registry-row .txt a {
  color: #000;
  -webkit-text-fill-color: #000;
  background: none;
  filter: none
}