/* Gramin Cinema — one-screen layout: header / body (banner + sliding form) / footer */

:root {
  --ink: #1b1410;        /* projector-room dark */
  --marigold: #f5a524;   /* festival flower / projector light */
  --marigold-dark: #d98a0b;
  --clay: #b5522b;       /* terracotta */
  --paddy: #4f7d36;      /* rice-field green */
  --cream: #fbf4e6;
  --paper: #fffdf8;
  --line: #e8dcc4;

  --font-display: Georgia, "Times New Roman", serif;
  --slide: .6s cubic-bezier(.22, .8, .24, 1);
}

html { scroll-behavior: smooth; }

/* The page is exactly one screen tall; only the form panel scrolls. */
html, body { height: 100%; }
body {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--ink); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.req { color: var(--clay); margin-left: .15rem; font-weight: 700; }

/* ───────────── Header ───────────── */

.site-header { flex: none; background: var(--ink); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }

.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  color: #fff; text-decoration: none;
  font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .02em;
}
.brand b { color: var(--marigold); font-weight: 700; }
.brand-icon { width: 30px; height: 30px; color: var(--marigold); }
.brand:hover .brand-icon { animation: spin 1.6s linear infinite; }

/* ───────────── Body: banner + sliding form ───────────── */

.stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--ink); color: #fff; }

.hero-carousel { position: absolute; inset: 0; }
.hero-carousel .carousel-inner, .hero-carousel .carousel-item { height: 100%; }
.hero-carousel .carousel-item { position: relative; overflow: hidden; }

.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform-origin: 60% 40%;
}
.carousel-item.active .hero-img { animation: kenburns 14s ease-out both; }

/* Shown when no banner has been uploaded yet */
.hero-fallback {
  background:
    radial-gradient(ellipse at 70% 28%, rgba(245,165,36,.55), transparent 45%),
    linear-gradient(180deg, #3b2418 0%, #7a3b1e 45%, #3d4f27 100%);
}

.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(27,20,16,.45) 0%, rgba(27,20,16,.15) 40%, rgba(27,20,16,.85) 100%),
    linear-gradient(90deg, rgba(27,20,16,.55), transparent 70%);
}

.hero-content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-top: 1.5rem; padding-bottom: 3rem;
  transition: opacity .35s ease, transform var(--slide), visibility 0s linear 0s;
}
/* Banner text drifts left and fades as the form slides in */
.stage.is-open .hero-content {
  opacity: 0; transform: translateX(-60px); visibility: hidden;
  transition: opacity .35s ease, transform var(--slide), visibility 0s linear .6s;
}

.hero-content > * { opacity: 0; }
.carousel-item.active .hero-content > * { animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) both; }
.carousel-item.active .hero-content > :nth-child(1) { animation-delay: .15s; }
.carousel-item.active .hero-content > :nth-child(2) { animation-delay: .3s; }
.carousel-item.active .hero-content > :nth-child(3) { animation-delay: .5s; }
.carousel-item.active .hero-content > :nth-child(4) { animation-delay: .7s; }

.hero-eyebrow {
  text-transform: uppercase; letter-spacing: .3em; font-size: .78rem; font-weight: 600;
  color: var(--marigold); margin-bottom: .9rem;
}
.hero-eyebrow::before {
  content: ""; display: inline-block; width: 2.2rem; height: 2px;
  background: var(--marigold); vertical-align: middle; margin-right: .75rem;
}

.hero-content h1 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.05;
  font-size: clamp(2.1rem, min(8vw, 11vh), 5.2rem);
  max-width: 16ch; margin-bottom: 1rem;
  text-shadow: 0 4px 30px rgba(0,0,0,.45);
}

.hero-sub {
  font-size: clamp(1rem, min(2.4vw, 3.2vh), 1.35rem); max-width: 40ch;
  color: rgba(255,255,255,.88); margin-bottom: 1.75rem;
}

.btn-register {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--marigold);
  --bs-btn-border-color: var(--marigold);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: #ffb83d;
  --bs-btn-hover-border-color: #ffb83d;
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--marigold-dark);
  --bs-btn-active-border-color: var(--marigold-dark);
  --bs-btn-disabled-color: var(--ink);
  --bs-btn-disabled-bg: var(--marigold);
  --bs-btn-disabled-border-color: var(--marigold);
  font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding-inline: 2rem;
  transition: transform .2s ease, background-color .2s ease;
}
.hero-content .btn-register { animation: glow 2.4s ease-out 1.6s infinite; }
.btn-register:hover { transform: translateY(-2px); }

.carousel-indicators { z-index: 5; margin-bottom: 1rem; }
.carousel-indicators [data-bs-target] { width: 28px; height: 4px; border: 0; border-radius: 2px; background: var(--marigold); }
.carousel-control-prev, .carousel-control-next { z-index: 5; width: 8%; }
.stage.is-open .carousel-indicators,
.stage.is-open .carousel-control-prev,
.stage.is-open .carousel-control-next { display: none; }

/* ───────────── Registration panel: slides in from the right ───────────── */

.register-drawer {
  position: absolute; inset: 0 0 0 auto; z-index: 6;
  width: min(100%, 620px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); color: var(--ink);
  border-left: 4px solid var(--marigold);
  box-shadow: -24px 0 60px -20px rgba(0,0,0,.7);

  /* No visible scrollbar; the panel still scrolls by wheel, touch and keyboard */
  scrollbar-width: none; -ms-overflow-style: none;

  transform: translateX(104%);
  visibility: hidden;                         /* closed: not focusable, not read out */
  transition: transform var(--slide), visibility 0s linear .6s;
}
.stage.is-open .register-drawer {
  transform: none; visibility: visible;
  transition: transform var(--slide), visibility 0s;
}
.register-drawer::-webkit-scrollbar { display: none; }
.register-drawer:focus { outline: none; }

.drawer-body {
  min-height: 100%; display: flex; flex-direction: column;
  padding: 1.25rem clamp(1rem, 4vw, 2rem) 0;
}

/* Title + progress */
.register-head { margin-bottom: 1rem; }
.register-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 1.75rem); margin: 0; }
.stepper { list-style: none; display: flex; gap: .4rem; margin: .8rem 0 .55rem; padding: 0; }
.stepper li { position: relative; flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.stepper li::after {
  content: ""; position: absolute; inset: 0; background: var(--marigold);
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.22,.8,.24,1);
}
.stepper li.done::after, .stepper li.current::after { transform: none; }
.step-label { display: flex; justify-content: space-between; gap: .75rem; margin: 0; font-size: .88rem; color: #6b5a4a; }
.step-label strong { color: var(--ink); }

/* The form: one step at a time; the buttons sit at the bottom of the panel */
#registerForm { flex: 1 1 auto; display: flex; flex-direction: column; }
.form-steps { flex: 1 1 auto; }
.form-step { border: 0; padding: .25rem 0 0; margin: 0; min-width: 0; }
.form-step:focus { outline: none; }
.is-stepper .form-step:not(.is-active) { display: none; }
.form-step.enter-next { animation: stepInNext .45s cubic-bezier(.22,.8,.24,1) both; }
.form-step.enter-prev { animation: stepInPrev .45s cubic-bezier(.22,.8,.24,1) both; }
.step-hint { margin: 0 0 .9rem; font-size: .9rem; color: #6b5a4a; }

.form-label { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.form-control, .form-select {
  border-color: #d9ccb2; background-color: #fff; padding: .6rem .8rem;
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--marigold-dark); box-shadow: 0 0 0 .25rem rgba(245,165,36,.28);
}

/* Back / Next / Submit: always visible, even on a small screen that has to scroll */
.form-actions {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; gap: .75rem;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: .85rem 0 1rem; margin-top: 1rem;
}
/* Soft fade above the buttons, only when part of the step is hidden below (scrollbar is hidden) */
.form-actions::before {
  content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,253,248,0), var(--paper));
  opacity: 0; transition: opacity .25s;
}
.register-drawer.has-more .form-actions::before { opacity: 1; }

/* Honeypot: off-screen rather than display:none so bots still fill it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.success-box {
  display: flex; align-items: center; gap: .9rem;
  background: #eef6e8; border: 1px solid #b9d7a6; color: #2f5a1c;
  border-radius: .75rem; padding: .8rem 1rem; margin-bottom: 1rem; font-weight: 600;
  animation: pop .5s cubic-bezier(.2,.9,.3,1.3) both;
}
.success-box svg { flex: none; width: 30px; height: 30px; color: var(--paddy); }
.register-drawer .alert { padding: .6rem .9rem; margin-bottom: 1rem; font-size: .92rem; }

/* ───────────── Film strip + footer ───────────── */

.filmstrip {
  flex: none; height: 18px; background-color: var(--ink);
  background-image: linear-gradient(90deg, var(--cream) 50%, transparent 0);
  background-size: 22px 8px; background-repeat: repeat-x; background-position: 0 5px;
}

.site-footer { flex: none; background: var(--ink); color: rgba(255,255,255,.7); padding: .7rem 0; font-size: .88rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--marigold); text-decoration: underline; }
.site-footer strong { color: var(--marigold); letter-spacing: .02em; }

.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 2rem; }
.footer-solo { justify-content: center; }

.footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.75rem; }
.fc-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--marigold); margin-right: .5rem;
}
.footer-meta { margin: 0; margin-left: auto; }
.footer-solo .footer-meta { margin-left: 0; }
.footer-meta .sep { margin: 0 .35rem; opacity: .5; }

/* ───────────── Animations ───────────── */

@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(245,165,36,.55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(245,165,36,0); } }
@keyframes stepInNext { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes stepInPrev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-content > * { opacity: 1; }
}

/* ───────────── Small screens ───────────── */

@media (max-width: 575.98px) {
  .header-inner { height: 56px; }
  .hero-content { padding-bottom: 2.5rem; }
  .carousel-control-prev, .carousel-control-next { display: none; }
  .register-drawer { border-left: 0; }
  .form-actions .btn { font-size: 1rem; white-space: nowrap; padding-left: 1rem; padding-right: 1rem; }
  .footer-inner { justify-content: center; text-align: center; }
  .footer-contact { justify-content: center; gap: .1rem 1rem; }
  /* labels stay for screen readers, hidden visually to save space */
  .fc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .footer-meta { margin-left: 0; }
}

/* Short screens (phones once the browser bars are counted, small laptop windows):
   tighten spacing so every step still fits without scrolling */
@media (max-width: 575.98px) and (max-height: 820px), (max-height: 700px) {
  .drawer-body { padding-top: .6rem; }
  .register-head { margin-bottom: .6rem; }
  .register-head h2 { display: none; }            /* the header bar already shows the name */
  .stepper { margin: 0 0 .45rem; }
  .form-step { padding-top: 0; }
  .register-drawer .row { --bs-gutter-y: .6rem; }
  .register-drawer .form-label { font-size: .82rem; margin-bottom: .15rem; }
  .register-drawer .form-control, .register-drawer .form-select { padding: .4rem .65rem; font-size: .95rem; }
  .step-hint { margin-bottom: .6rem; }
  .register-drawer textarea.form-control { min-height: 0; height: 3rem; resize: none; }   /* full address: 1-2 lines */
  .form-actions { padding: .55rem 0 .65rem; margin-top: .4rem; }
  .form-actions .btn { padding-top: .45rem; padding-bottom: .45rem; }
  .filmstrip { height: 12px; background-size: 18px 6px; background-position: 0 3px; }
  .site-footer { padding: .45rem 0; font-size: .8rem; }
}

/* Very short screens (phones in landscape): let the page scroll instead of squeezing */
@media (max-height: 520px) {
  body { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
  .stage { min-height: 460px; }
}