/* ==========================================================================
   Arts Fiesta 2026 — Coming Soon teaser
   ========================================================================== */

:root {
  --color-bg: #582630;
  --color-text: #ffffd3;
  --color-link-hover: #ad3030;
  --color-selection-bg: #8e5f92;
  --color-badge-bg: #ffffd3;
  --color-badge-text: #582630;
  --color-sponsor-label: #8e5f92;

  --font-display: "Jost", "Kabel Black", "Arial Black", sans-serif;
  --font-hand: "Gaegu", system-ui;
  --font-artistic: "Barrio", system-ui;

  /* Shared type-role tracking, reused by the tier classes below so the
     same kind of text (kickers, headings, pill labels) reads the same
     everywhere it shows up, even though each instance sets its own size. */
  --tracking-eyebrow: 0.3em;
  --tracking-title: 0.08em;
  --tracking-brand: 0.08em;
  --tracking-pill: 0.16em;

  --radius-media: 12px;

  --max-width: 1200px;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-hand);
  overflow-x: hidden;
  min-height: 100vh;
}

a {
  color: var(--color-text);
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-text);
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- Reveal-on-load animation ---------- */

@keyframes af-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-reveal] {
  animation: af-fade-up 900ms cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- Typography tiers ----------
   Shared roles for text that repeats across sections, ordered by
   hierarchy: header (the hero wordmark) > title (a section's own
   heading) > subtitle (the supporting line under a title) > eyebrow
   (the kicker above a title) > hand (casual accent copy) — plus
   label and brand, two roles that sit outside that hierarchy (a UI
   tag, a logotype lockup). Each tier fixes font-family/weight/
   letter-spacing so equivalent text matches everywhere; size, color
   and spacing stay with the component class.

   A few components need a tier's font-family/weight but not its
   letter-spacing (e.g. large numerals read better untracked). Rather
   than duplicate the family/weight pair, those are grouped into the
   tier's selector below — see the component's own rule for a pointer
   back here. */

.text-header {
  font-family: var(--font-display);
  font-weight: 800;
}

.text-title,
.text-subtitle {
  font-family: var(--font-artistic);
  font-weight: 700;
}

.text-title {
  font-size: clamp(1.3rem, 3vw, 2.1rem);
  letter-spacing: var(--tracking-title);
}

.text-eyebrow {
  font-family: var(--font-hand);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
}

.text-hand {
  font-family: var(--font-hand);
  font-weight: 700;
}

/* .hero__date and .countdown__grid share this family/weight but stay
   untracked, so they're grouped in rather than composed via class. */
.text-brand,
.hero__date,
.countdown__grid {
  font-family: var(--font-artistic);
  font-weight: 800;
}

.text-brand {
  letter-spacing: var(--tracking-brand);
}

.text-label,
.pill {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-pill);
}

.pill {
  display: inline-flex;
  align-items: center;
}

/* ---------- Section layout ----------
   Shared wrapper for standalone content sections (countdown, recap,
   pre-order, …) so they share one padding rhythm and heading spot.
   .section--centered is for sections whose content is centered as a
   single column; sections with their own layout (e.g. two-column)
   omit it and lay out their content directly. */

.section {
  position: relative;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 3.5rem);
  background: var(--color-bg);
}

.section--centered {
  text-align: center;
}

.section__title {
  margin: 0 0 1.8rem;
  color: var(--color-text);
}

/* ---------- Button ----------
   Shared pill-shaped call-to-action, layered on top of the .pill
   type tier for its font/tracking. */

.button {
  gap: 0.6rem;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  color: var(--color-badge-text);
  background: var(--color-badge-bg);
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.button:hover,
.button:focus-visible {
  color: var(--color-badge-text);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.button__arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.button:hover .button__arrow,
.button:focus-visible .button__arrow {
  transform: translateX(4px);
}

/* ---------- Media frame ----------
   Shared corner treatment for anything that shows a photo or logo, so
   every image on the page reads as one consistent, smooth-edged style. */

.media-frame {
  border-radius: var(--radius-media);
  overflow: hidden;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* dvh tracks the browser's *actual* visible area on mobile, where a
     collapsing/expanding address bar makes plain vh unreliable (100vh
     there is measured against the largest possible viewport, not what's
     really on screen). Declared after vh as a progressive enhancement —
     browsers that don't understand dvh ignore the line and keep vh. */
  min-height: 115vh;
  min-height: 115dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

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

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(20, 8, 11, 0.4);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(88, 38, 48, 0) 0%,
    rgba(88, 38, 48, 0) 68%,
    rgba(88, 38, 48, 0.55) 86%,
    var(--color-bg) 100%
  );
}

/* ---------- Top bar ---------- */

.top-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.1rem, 3vw, 1.8rem) clamp(1.25rem, 4vw, 3.5rem);
}

.top-bar__brand {
  height: clamp(30px, 4.5vw, 42px);
  width: auto;
  max-width: 60px;
}

.top-bar__badge {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--color-text);
  border: 2px solid var(--color-text);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}

/* ---------- Hero content ---------- */

.hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centered, but biased upward by giving the box more room below the
     content than above it (see the asymmetric padding below) — a
     layout-based lift instead of a transform, so it's bounded by this
     box's real height and can never paint over the top bar above it,
     however short the viewport actually is. */
  justify-content: center;
  text-align: center;
  padding: clamp(1rem, 4vh, 2rem) clamp(1.25rem, 5vw, 5rem) clamp(4rem, 16vh, 10rem);
}

.hero__inner {
  max-width: 56rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__eyebrow {
  font-size: 0.8rem;
  color: var(--color-text);
  margin-bottom: 1.6rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* type comes from .text-header, added alongside in markup */
.hero__title {
  margin: 0;
  line-height: 0.98;
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero__logo {
  display: block;
  width: clamp(180px, 40vw, 460px);
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.4));
}

.hero__logo-fallback {
  display: none;
  font-size: clamp(1.7rem, 5.5vw, 3.9rem);
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* shown via JS if the logo image fails to load */
.hero__title.logo-failed .hero__logo {
  display: none;
}
.hero__title.logo-failed .hero__logo-fallback {
  display: block;
}

.hero__desc {
  z-index: 4;
  max-width: 56ch;
  margin: 1rem 0 0;
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  line-height: 1.4;
  color: var(--color-text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* type comes from .text-subtitle, added alongside in markup */
.hero__meta {
  margin: 2rem 0 0;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-text);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* font-family/weight grouped into .text-brand's selector above (kept untracked) */
.hero__date {
  color: var(--color-text);
}

@media (max-width: 640px) {
  .hero {
    min-height: auto !important;
    /* Shorter box = less side-cropping on the near-square artwork
       (object-fit: cover crops width to fill height), so lowering
       this reveals more of the image left/right. Raise it back
       toward 92vh for a taller, more cropped-in mobile hero.
       dvh (see the base .hero rule) keeps this accurate once a real
       phone's address bar shows/hides — vh alone would not. */
    height: 62vh !important;
    height: 62dvh !important;
  }

  .hero__content {
    /* Extra mobile-only lift: push the bottom padding out further
       than the desktop rule so the logo/text chunk sits higher.
       Still just padding within .hero__content's real box, so it
       can never paint over the top bar the way a fixed transform
       could on a shorter-than-expected real viewport. More padding
       here = higher; less = lower. */
    padding-bottom: clamp(5rem, 22vh, 13rem);
  }
}

/* ---------- Countdown ---------- */

/* font-family/weight grouped into .text-brand's selector above (kept untracked) */
.countdown__grid {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(4px, 2.6vw, 18px);
  font-variant-numeric: tabular-nums;
  flex-wrap: nowrap;
  max-width: 100%;
}

.countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  flex: 1 1 0;
  gap: clamp(0.4rem, 1.2vw, 0.7rem);
}

.countdown__value {
  font-size: clamp(1.7rem, 11vw, 8rem);
  color: var(--color-text);
  line-height: 1.15;
  white-space: nowrap;
}

.countdown__unit {
  font-size: clamp(0.42rem, 1.9vw, 0.92rem);
  color: var(--color-badge-text);
  background: var(--color-badge-bg);
  padding: clamp(0.15rem, 0.5vw, 0.25rem) clamp(0.3rem, 1.4vw, 0.7rem);
  border-radius: 3px;
  white-space: nowrap;
}

/* ---------- Recap ---------- */

.recap__slider {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Fade the two edges by masking the scroller itself, rather than
     overlaying a separate element — an overlay can end up rendered
     behind the scrolling content's own compositing layer on mobile
     WebKit (a side effect of -webkit-overflow-scrolling: touch). */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 clamp(2rem, 8vw, 6rem),
    #000 calc(100% - clamp(2rem, 8vw, 6rem)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 clamp(2rem, 8vw, 6rem),
    #000 calc(100% - clamp(2rem, 8vw, 6rem)),
    transparent 100%
  );
}

.recap__slider::-webkit-scrollbar {
  display: none;
  height: 0;
}

.recap__slider.is-dragging {
  cursor: grabbing;
}

.recap__track {
  display: flex;
  gap: clamp(0.6rem, 1.6vw, 1.25rem);
  width: max-content;
}

.recap__slide {
  flex: 0 0 auto;
  display: block;
  width: clamp(140px, 22vw, 240px);
  height: clamp(175px, 27.5vw, 300px);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 211, 0.12),
    rgba(255, 255, 211, 0.04)
  );
}

.recap__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.recap__button {
  margin-top: 2.4rem;
}

/* ---------- Instagram ----------
   Self-hosted thumbnails of our own teaser videos (not live embeds),
   styled with a play-button overlay to read as inline video, but each
   just links out to the real post on Instagram. */

.section__title--instagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.instagram__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.instagram-icon {
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
}

.instagram__slider {
  position: relative;
  max-width: 70rem;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 clamp(1rem, 4vw, 3rem),
    #000 calc(100% - clamp(1rem, 4vw, 3rem)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 clamp(1rem, 4vw, 3rem),
    #000 calc(100% - clamp(1rem, 4vw, 3rem)),
    transparent 100%
  );
}

.instagram__slider::-webkit-scrollbar {
  display: none;
  height: 0;
}

.instagram__slider.is-dragging {
  cursor: grabbing;
}

.instagram__grid {
  display: flex;
  gap: clamp(1rem, 3vw, 2rem);
  width: max-content;
  margin: 0 auto;
  padding: 0.25rem;
}

.instagram__item {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(250px, 30vw, 350px);
  aspect-ratio: 4 / 3;
  background: transparent;
  transition: opacity 0.2s ease;
}

.instagram__item:hover {
  opacity: 0.85;
}

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

.instagram__item--video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(2.6rem, 6vw, 3.6rem);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffd3'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 42%;
}

.instagram__item--more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 2px dashed var(--color-text);
  padding: 1rem;
  text-align: center;
  text-decoration: none;
}

.instagram__more-text {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--color-text);
}

.instagram__more-button {
  pointer-events: none;
}

.instagram__note {
  margin: 1.8rem 0 0;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--color-text);
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  background: var(--color-bg);
  color: var(--color-text);
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 3.5rem) 1.6rem;
}

.footer__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.4rem;
  align-items: start;
}

.footer__title {
  font-size: 1.3rem;
  color: var(--color-text);
}

.footer__desc {
  margin: 0.8rem 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text);
  max-width: 32ch;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-size: 1.05rem;
}

.footer__links a {
  text-decoration: none;
}

.footer__sponsors {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.sponsor {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sponsor__label {
  font-size: 0.64rem;
  color: var(--color-sponsor-label);
}

.sponsor__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 60px;
  background: #ffffff;
}

.sponsor__logo--gomgom {
  width: 140px;
}

.sponsor__logo img {
  width: 78%;
  height: auto;
  object-fit: contain;
}

.footer__bottom {
  max-width: var(--max-width);
  margin: 2.6rem auto 0;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 211, 0.18);
  font-size: 0.85rem;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__bottom a {
  text-decoration: none;
}