/* ═══════════════════════════════════════════════════════════
   TOTEC — Globala stilar
   Tema: "Aztec Terminal" — Forntid möter Framtid
   Mobile-first · Vanilla CSS · Inga externa bibliotek
═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Caesar Dressing';
  src: url('../assets/fonts/CaesarDressing-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Press Start 2P';
  src: url('../assets/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Share Tech Mono';
  src: url('../assets/fonts/ShareTechMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel Decorative';
  src: url('../assets/fonts/CinzelDecorative-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ─── CSS-variabler ──────────────────────────────────────── */
:root {
  /* Färger */
  --color-bg:          #0a0a05;
  --color-surface:     #111108;
  --color-border:      #2a2a10;

  --color-gold:        #c8920a;
  --color-gold-bright: #f0b429;
  --color-jade:        #1a7a4a;
  --color-jade-bright: #22a863;

  --color-text:        #e8dfc0;
  --color-muted:       #6b6040;
  --color-pixel-red:   #c0392b;

  /* Typografi */
  --font-display:  'Press Start 2P', monospace;
  --font-mono:     'Share Tech Mono', monospace;
  --font-decorative: 'Cinzel Decorative', serif;

  /* Fontstorlekar (mobil-bas) */
  --text-xs:   0.625rem;   /* 10px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-hero: 2.5rem;     /* 40px — skalas ner på mobil */

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;

  /* Glöd-effekter */
  --glow-gold: 0 0 8px var(--color-gold), 0 0 24px rgba(200, 146, 10, 0.4);
  --glow-jade: 0 0 8px var(--color-jade), 0 0 24px rgba(26, 122, 74, 0.4);

  /* Övergångar */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ─── Reset & Box-model ──────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Grundstilar ────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
}

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

a {
  color: var(--color-gold);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

/* ─── Fokus-ring (tillgänglighet) ────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}


/* ─── Scanlines-overlay (CRT-känsla) ────────────────────── */
.scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ─── Utility: Aztekisk geometrisk border ────────────────── */
.aztec-border {
  border-image: repeating-linear-gradient(
    90deg,
    var(--color-gold)        0px,
    var(--color-gold)        4px,
    transparent              4px,
    transparent              8px,
    var(--color-gold-bright) 8px,
    var(--color-gold-bright) 12px,
    transparent              12px,
    transparent              20px
  ) 4;
  border-width: 4px;
  border-style: solid;
}

/* ─── Utility: glödande ram på kort ─────────────────────── */
.glow-box {
  box-shadow: var(--glow-gold);
  border: 1px solid var(--color-border);
}

/* ═══════════════════════════════════════════════════════════
   HERO-SEKTIONEN
═══════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  overflow: hidden;
  text-align: center;
}

/* Roterande solcirkel i bakgrunden */
.hero__sun-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.hero__sun {
  width: min(140vmax, 900px);
  aspect-ratio: 1;
  opacity: 0.15;
  animation: solar-rotation 120s linear infinite;
}

@keyframes solar-rotation {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Innehållslager ovanpå solen */
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 600px;
  width: 100%;
}

/* Liten övre etikett */
.hero__pre-title {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 2.6vw, 1.3rem);
  color: #b8a878;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* Festivalnamnet — TOTEC */
.hero__title {
  font-family: 'Caesar Dressing', var(--font-display);
  font-size: clamp(3rem, 18vw, 8rem);
  line-height: 1.1;
  letter-spacing: 0.05em;
  color: var(--color-gold);
}

.hero__title-glow {
  display: inline-block;
  text-shadow:
    0 0 8px rgba(200, 146, 10, 0.7),
    0 0 20px rgba(200, 146, 10, 0.25);
  animation: titel-puls 4s ease-in-out infinite;
}

@keyframes titel-puls {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(200, 146, 10, 0.7),
      0 0 20px rgba(200, 146, 10, 0.25);
  }
  50% {
    text-shadow:
      0 0 10px rgba(240, 180, 41, 0.8),
      0 0 28px rgba(240, 180, 41, 0.3);
  }
}

/* Tagline */
.hero__tagline {
  font-family: var(--font-pixel);
  font-size: clamp(1rem, 4.5vw, var(--text-xl));
  color: var(--color-text);
  letter-spacing: 0.2em;
  opacity: 0.85;
  margin-top: -1.5rem;
}

/* Tunn aztekisk avdelare */
.hero__divider {
  width: min(280px, 80%);
  height: 0;
}

/* ─── Ljudknapp ──────────────────────────────────────────── */
#sound-btn {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 1000;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  padding: 8px;
}

#sound-btn:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

#sound-btn svg {
  width: 100%;
  height: 100%;
}

#sound-btn .sound-off { display: none; }
#sound-btn.sound-btn--muted .sound-on  { display: none; }
#sound-btn.sound-btn--muted .sound-off { display: block; }

/* ─── Scroll-indikator ───────────────────────────────────── */
.hero__scroll {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--color-muted);
  transition: color var(--transition-base);
  animation: scroll-bounce 2s ease-in-out infinite;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  color: var(--color-gold);
}

.hero__scroll-arrow {
  width: 28px;
  height: 28px;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0);    opacity: 0.5; }
  50%       { transform: translateX(-50%) translateY(8px);  opacity: 1;   }
}
/* ─── Mobil: solstenen spiller utanför viewport ──────────── */
@media (max-width: 767px) {
  .hero__sun {
    width: 130vw;
    max-width: none;
  }
}

/* ─── Desktop (768px+) ───────────────────────────────────── */
@media (min-width: 768px) {
  .hero {
    padding: var(--space-2xl) var(--space-xl);
  }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */

.footer {
  position: relative;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

.footer__border {
  width: 100%;
  height: 0;
  margin-bottom: var(--space-lg);
}

.footer__copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: 0.2em;
}