/* ============================================
   AGRO ESPORTE CLUBE — Bio Link Page
   Design System & Styles
   ============================================ */

/* ---- CUSTOM PROPERTIES ---- */
:root {
  /* Core palette */
  --bg-primary: #07100B;
  --bg-card: #0d1a10;
  --bg-card-hover: #122016;
  --bg-card-primary: linear-gradient(135deg, #1a2e12 0%, #0d1a10 100%);

  /* Gold spectrum */
  --gold-100: #f7edc4;
  --gold-200: #f0e1a1;
  --gold-300: #e8d48b;
  --gold-400: #d4b96a;
  --gold-500: #c5a55a;
  --gold-600: #a88a40;
  --gold-700: #9a7e3a;
  --gold-800: #7a6228;

  /* Green accents */
  --green-900: #0a1a0d;
  --green-800: #0f2413;
  --green-700: #132a15;
  --green-600: #1a3a1e;
  --green-500: #245028;

  /* Text */
  --text-primary: #f0ead6;
  --text-secondary: rgba(240, 234, 214, 0.75);
  --text-muted: rgba(240, 234, 214, 0.5);
  --text-gold: #d4b96a;

  /* Effects */
  --glow-gold: rgba(197, 165, 90, 0.15);
  --glow-gold-strong: rgba(197, 165, 90, 0.35);
  --border-subtle: rgba(197, 165, 90, 0.22);
  --border-hover: rgba(197, 165, 90, 0.4);

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

  /* Typography */
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-med: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Entry splash duration (shifts content fade-in) — total ~3s with fade-out */
  --splash: 2.7s;
}


/* ---- RESET & BASE ---- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}


/* ---- BACKGROUND: PHOTOS (agro sky × football pitch) ---- */
.bg-photo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #0b1a0d;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* User background (vertical photo): blur+grade baked into bg-blur.jpg (transform-only anim) */
.bg-photo--main {
  background-image: url('bg-blur.jpg');
  background-position: center 30%;
  transform-origin: 50% 32%;
  animation:
    bgFadeIn 0.5s ease-out backwards,
    kenburns 4s ease-in-out infinite alternate;
}

@keyframes bgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Gentle continuous drift: 100% -> ~102.5% -> 100% (~4s per half-cycle) */
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.025); }
}

/* Readability + brand color grade over the photos */
.bg-shade {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* vertical shading: deeper top & bottom, airy centre to keep the stadium visible */
    linear-gradient(180deg,
      rgba(5, 11, 7, 0.55) 0%,
      rgba(5, 11, 7, 0.2) 22%,
      rgba(5, 11, 7, 0.3) 44%,
      rgba(5, 11, 7, 0.52) 70%,
      rgba(4, 10, 6, 0.7) 100%
    ),
    /* dark reading band concentrated behind the central content */
    radial-gradient(ellipse 150% 115% at 50% 52%,
      rgba(3, 8, 5, 0.62) 0%,
      rgba(3, 8, 5, 0.4) 38%,
      rgba(3, 8, 5, 0.16) 66%,
      rgba(3, 8, 5, 0) 100%),
    /* green-gold grade */
    linear-gradient(180deg, rgba(10, 26, 13, 0.32) 0%, rgba(7, 16, 10, 0.1) 45%, rgba(8, 18, 11, 0.44) 100%);
}

/* Warm stadium light, gently breathing behind the content (very subtle) */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background: radial-gradient(
    ellipse 72% 58% at 50% 60%,
    rgba(212, 185, 106, 0.05) 0%,
    rgba(212, 185, 106, 0) 70%
  );
  animation: goldAmbient 3s ease-in-out infinite alternate;
}

@keyframes goldAmbient {
  from { opacity: 0.45; }
  to   { opacity: 0.8; }
}


/* ---- VIGNETTE ---- */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 82% 68% at 50% 44%, transparent 0%, rgba(4, 9, 6, 0.32) 100%),
    linear-gradient(180deg, rgba(3, 8, 5, 0.28) 0%, transparent 18%, transparent 82%, rgba(3, 8, 5, 0.4) 100%);
}


/* ---- FILM GRAIN ---- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}


/* ---- AGRO MOTIFS (disabled — oversized decorative plants removed) ---- */
.agro-motifs {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.motif {
  position: absolute;
  color: rgba(212, 185, 106, 0.1);
}

.motif--wheat {
  width: 150px;
  bottom: 46vh;
  left: 2vw;
  animation: swayWheat 9s ease-in-out infinite;
}

.motif--soy {
  width: 170px;
  bottom: 46vh;
  right: 2vw;
  animation: swaySoy 11s ease-in-out infinite;
}

@keyframes swayWheat {
  0%, 100% { transform: rotate(-10deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-6px); }
}

@keyframes swaySoy {
  0%, 100% { transform: scaleX(-1) rotate(10deg) translateY(0); }
  50% { transform: scaleX(-1) rotate(3deg) translateY(-6px); }
}


/* ---- GOLDEN BOKEH (disabled — too much noise on top of the content) ---- */
.bokeh {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bokeh__orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    rgba(247, 237, 196, 0.7) 0%,
    rgba(197, 165, 90, 0.3) 45%,
    rgba(197, 165, 90, 0) 70%
  );
  filter: blur(6px);
  opacity: 0;
  animation: bokehFloat 14s infinite ease-in-out;
}

.bo1 { width: 90px; height: 90px; left: 8%;  top: 15%; animation-delay: 0s; }
.bo2 { width: 45px; height: 45px; left: 88%; top: 25%; animation-delay: 3s; }
.bo3 { width: 65px; height: 65px; left: 70%; top: 60%; animation-delay: 6s; }
.bo4 { width: 30px; height: 30px; left: 20%; top: 70%; animation-delay: 9s; }
.bo5 { width: 55px; height: 55px; left: 92%; top: 72%; animation-delay: 2s; }
.bo6 { width: 40px; height: 40px; left: 45%; top: 12%; animation-delay: 11s; }
.bo7 { width: 80px; height: 80px; left: 30%; top: 45%; animation-delay: 5s; }
.bo8 { width: 25px; height: 25px; left: 62%; top: 82%; animation-delay: 8s; }

@keyframes bokehFloat {
  0%, 100% { opacity: 0; transform: translateY(14px) scale(0.9); }
  25% { opacity: 0.45; }
  50% { opacity: 0.8; transform: translateY(-20px) scale(1.15); }
  75% { opacity: 0.3; }
}


/* ---- GOLDEN DUST PARTICLES (stadium light dust, background only) ---- */
.particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(247, 237, 196, 0.8) 0%,
    rgba(212, 185, 106, 0.3) 55%,
    rgba(212, 185, 106, 0) 100%
  );
  opacity: 0;
  animation: dustFloat 11s ease-in-out infinite;
  will-change: transform, opacity;
}

.particle:nth-child(1) { left: 14%; top: 34%; animation-duration: 13s; animation-delay: 0s; }
.particle:nth-child(2) { left: 82%; top: 22%; animation-duration: 15s; animation-delay: 2.4s; }
.particle:nth-child(3) { left: 68%; top: 64%; animation-duration: 12s; animation-delay: 4.6s; }
.particle:nth-child(4) { left: 24%; top: 72%; animation-duration: 16s; animation-delay: 1.2s; }
.particle:nth-child(5) { left: 90%; top: 52%; animation-duration: 14s; animation-delay: 6s; }
.particle:nth-child(6) { left: 38%; top: 18%; animation-duration: 17s; animation-delay: 3.4s; }
.particle:nth-child(7) { left: 55%; top: 80%; animation-duration: 13s; animation-delay: 5.8s; }
.particle:nth-child(8) { left: 6%; top: 58%; animation-duration: 15s; animation-delay: 7.6s; }

@keyframes dustFloat {
  0% { transform: translateY(28px) translateX(0) scale(0.6); opacity: 0; }
  18% { opacity: 0.45; }
  62% { opacity: 0.28; }
  100% { transform: translateY(-120px) translateX(14px) scale(1); opacity: 0; }
}


/* ---- ENTRY SPLASH ---- */
/* Fim controlado por JS: .splash--out faz o container inteiro (verde + logo +
   nome) desaparecer junto via transition; .splash--gone remove do DOM. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.splash.splash--out {
  opacity: 0;
  visibility: hidden;
}

.splash.splash--gone {
  display: none;
}

/* Full-bleed brand background — the whole container fades out together, so
   the green never lingers or reappears after the splash. */
.splash__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse 120% 90% at 50% 50%,
    #0d1a10 0%,
    #050c08 75%
  );
}

.splash__logo {
  width: 110px;
  height: 147px;
  object-fit: contain;
  animation: splashLogo 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

.splash__name {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold-300);
  opacity: 0;
  animation: splashName 0.9s ease forwards;
  animation-delay: 0.65s;
}

@keyframes splashLogo {
  0% { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes splashName {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0.85; transform: translateY(0); }
}


/* ---- CONTAINER ---- */
.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  padding-top: calc(clamp(14px, 2.6vh, 36px) + env(safe-area-inset-top));
  padding-inline: var(--space-lg);
  padding-bottom: calc(clamp(20px, 4vh, 48px) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}


/* ---- SHIELD ---- */
.shield-wrapper {
  position: relative;
  width: clamp(112px, 14vw, 128px);
  aspect-ratio: 84.75 / 113.25;
  margin-bottom: clamp(12px, 2vh, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shield entrance: gentle opacity fade only — no rise, no jumping */
.shield-wrapper.fade-in {
  animation: fadeIn 0.7s ease-out backwards;
  animation-delay: calc(var(--splash) - 0.5s);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.shield-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(197, 165, 90, 0.15));
  transition: transform var(--transition-fast);
  /* prevent long-press "save/open image" menu on mobile */
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

.shield-logo:hover {
  transform: scale(1.04);
}

.shield-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(
    ellipse at center,
    rgba(197, 165, 90, 0.08) 0%,
    transparent 70%
  );
  z-index: -1;
  border-radius: 50%;
  animation: pulseGlow 2.5s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.06); }
}


/* ---- CLUB NAME ---- */
.club-name {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
  line-height: 1.3;
}


/* ---- TAGLINE ---- */
.tagline {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-align: center;
  color: rgba(244, 238, 218, 0.82);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 320px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.tagline strong {
  color: var(--gold-200);
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}


/* ---- SEPARATOR ---- */
.separator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  width: 100%;
  max-width: 180px;
}

.sep-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold-500) 50%,
    transparent 100%
  );
  opacity: 0.45;
  transform-origin: 50% 50%;
  animation: sepLineGrow 0.5s ease-out backwards;
  animation-delay: calc(var(--splash) + 0.15s);
}

.separator .sep-line:first-child {
  transform-origin: 100% 50%;
}

.separator .sep-line:last-child {
  transform-origin: 0 50%;
}

.sep-diamond {
  font-size: 0.42rem;
  color: var(--gold-400);
  opacity: 0.85;
  text-shadow: 0 0 10px rgba(212, 185, 106, 0.5);
  animation: sepDiamondIn 0.5s ease-out backwards;
  animation-delay: calc(var(--splash) + 0.18s);
}

/* Lines grow from the centre out; diamond fades in — then stays static */
@keyframes sepLineGrow {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 0.45; }
}

@keyframes sepDiamondIn {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 0.85; transform: scale(1); }
}


/* ---- LINKS PANEL (frosted glass) ---- */
.links-panel {
  width: 100%;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    165deg,
    rgba(16, 30, 19, 0.78) 0%,
    rgba(6, 13, 9, 0.74) 100%
  );
  border: 1px solid rgba(197, 165, 90, 0.2);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(197, 165, 90, 0.05),
    inset 0 1px 0 rgba(240, 225, 161, 0.06);
  animation: cardGlow 3s ease-in-out infinite alternate;
  position: relative;
}

/* Combine card entrance fade + slow ambient glow (beats .fade-in cascade) */
.links-panel.fade-in {
  animation:
    fadeInUp 0.7s ease-out backwards,
    cardGlow 3s ease-in-out infinite alternate;
  animation-delay: calc(var(--splash) - 0.5s);
}
/* Slow ambient green/gold breathing around the card (very subtle) */
@keyframes cardGlow {
  from {
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.5),
      0 0 55px rgba(197, 165, 90, 0.05),
      inset 0 1px 0 rgba(240, 225, 161, 0.06);
  }
  to {
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.5),
      0 0 90px rgba(197, 165, 90, 0.12),
      0 0 4px rgba(26, 58, 30, 0.4),
      inset 0 1px 0 rgba(240, 225, 161, 0.06);
  }
}

.links-panel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 185, 106, 0.4),
    transparent
  );
}


/* ---- LINKS NAV ---- */
.links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  margin-bottom: var(--space-3xl);
}

.links-panel .links {
  margin-bottom: 0;
}


/* ---- LINK BUTTONS — BASE ---- */
.link-btn {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-lg);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-med),
    border-color var(--transition-med),
    background var(--transition-med);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.link-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--transition-med);
}

.link-btn:active {
  transform: scale(0.98);
  transition-duration: 0.12s;
}


/* ---- PRIMARY BUTTON (INGRESSOS) ---- */
.link-btn--primary {
  background: linear-gradient(135deg, #1f3a1a 0%, #16301a 45%, #0f2413 100%);
  border: 1.5px solid var(--gold-400);
  box-shadow:
    0 2px 18px rgba(197, 165, 90, 0.18),
    inset 0 1px 0 rgba(240, 225, 161, 0.12),
    inset 0 0 46px rgba(197, 165, 90, 0.05);
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-lg);
}

.link-btn--primary::before {
  background: linear-gradient(
    135deg,
    rgba(197, 165, 90, 0.09) 0%,
    rgba(197, 165, 90, 0.02) 100%
  );
}

.link-btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  transform-origin: left center;
  /* resting position is fully off-screen — never a frozen visible strip */
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(240, 225, 161, 0.07) 50%,
    transparent 100%
  );
  animation: ctaSheen 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Quick, occasional gold reflection sweeping the CTA (transform-only) */
@keyframes ctaSheen {
  0%, 86% { transform: translateX(-130%) skewX(-18deg); }
  96% { transform: translateX(210%) skewX(-18deg); }
  100% { transform: translateX(-130%) skewX(-18deg); }
}

.link-btn--primary:hover {
  border-color: var(--gold-200);
  box-shadow:
    0 7px 30px rgba(197, 165, 90, 0.28),
    0 0 50px rgba(197, 165, 90, 0.07),
    inset 0 1px 0 rgba(240, 225, 161, 0.16);
  transform: translateY(-3px);
}

.link-btn--primary:hover::before {
  opacity: 1;
}

.link-btn--primary:hover .link-btn__arrow {
  color: var(--gold-200);
  transform: translateX(4px);
}

.link-btn--primary .link-btn__icon {
  color: #ffd700;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.35));
}

.link-btn--primary .link-btn__title {
  color: var(--gold-300);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
}

.link-btn--primary .link-btn__subtitle {
  color: var(--text-secondary);
}

.link-btn--primary .link-btn__arrow {
  color: var(--gold-400);
}

/* Ocultar botão de ingressos enquanto não há vendas.
   Remove esta classe (.link-btn--hidden) quando os jogos voltarem.
   O restante da configuração (href, rótulos) permanece intacto. */
.link-btn--hidden {
  display: none;
}


/* ---- SECONDARY BUTTONS ---- */
.link-btn--secondary {
  background: linear-gradient(135deg, rgba(10, 22, 13, 0.92) 0%, rgba(5, 12, 8, 0.96) 100%);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.link-btn--secondary::before {
  background: linear-gradient(
    135deg,
    rgba(197, 165, 90, 0.03) 0%,
    transparent 100%
  );
}

.link-btn--secondary:hover {
  background: linear-gradient(135deg, rgba(18, 35, 22, 0.95) 0%, rgba(8, 16, 11, 0.97) 100%);
  border-color: rgba(197, 165, 90, 0.42);
  box-shadow:
    0 6px 18px rgba(197, 165, 90, 0.12),
    inset 0 1px 0 rgba(240, 225, 161, 0.04);
  transform: translateY(-3px);
}

.link-btn--secondary:hover::before {
  opacity: 1;
}

.link-btn--secondary:hover .link-btn__title {
  color: var(--gold-300);
}

.link-btn--secondary:hover .link-btn__arrow {
  color: var(--gold-300);
  transform: translateX(4px);
}

.link-btn--secondary .link-btn__icon {
  color: var(--gold-400);
  opacity: 1;
  transition: opacity var(--transition-med), transform var(--transition-fast);
}

.link-btn--secondary:hover .link-btn__icon {
  opacity: 1;
  transform: scale(1.08);
}


/* ---- BUTTON INNER ELEMENTS ---- */
.link-btn__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: transform var(--transition-fast);
}

.link-btn:hover .link-btn__icon {
  transform: scale(1.08);
}

.link-btn__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.link-btn__title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--transition-med);
}

.link-btn__subtitle {
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(240, 234, 214, 0.62);
  letter-spacing: 0.02em;
}

.link-btn__arrow {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--text-muted);
  transition:
    color var(--transition-med),
    transform var(--transition-med);
  font-weight: 300;
}

/* ---- FOOTER ---- */
.footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-xl);
}

.footer__brand {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(240, 234, 214, 0.66);
}

.footer__motto {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-500);
  opacity: 0.9;
}

.footer__dot {
  margin: 0 0.15em;
  opacity: 0.5;
}

.footer__rights {
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(240, 234, 214, 0.45);
  margin-top: var(--space-xs);
}

@media (max-width: 480px) {
  .footer__rights {
    font-size: 0.55rem;
  }
}


/* ---- FADE-IN ANIMATIONS ---- */
/* After the entrance finishes, the element returns to its resting style
   (no forwards fill), so hover/active transitions are never blocked. */
.fade-in {
  opacity: 1;
  transform: none;
  animation: fadeInUp 0.7s ease-out backwards;
  animation-delay: var(--splash);
}

.delay-1 { animation-delay: calc(var(--splash) + 0.06s); }
.delay-2 { animation-delay: calc(var(--splash) + 0.12s); }
.delay-3 { animation-delay: calc(var(--splash) + 0.18s); }
.delay-4 { animation-delay: calc(var(--splash) + 0.24s); }
.delay-5 { animation-delay: calc(var(--splash) + 0.3s); }
.delay-6 { animation-delay: calc(var(--splash) + 0.36s); }
.delay-7 { animation-delay: calc(var(--splash) + 0.42s); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ---- RESPONSIVE ---- */
@media (max-width: 480px) {
  .container {
    padding: calc(24px + env(safe-area-inset-top)) var(--space-md) calc(40px + env(safe-area-inset-bottom));
  }

  .bg-photo--main {
    background-position: center 26%;
  }

  .shield-wrapper {
    width: 130px;
    margin-bottom: clamp(18px, 3vh, 40px);
  }

  .club-name {
    font-size: 1.2rem;
    letter-spacing: 0.2em;
  }

  .tagline {
    font-size: 0.8rem;
  }

  .link-btn {
    padding: var(--space-md) var(--space-md);
  }

  .link-btn--primary {
    padding: var(--space-lg) var(--space-md);
  }

  .link-btn__icon {
    width: 36px;
    height: 36px;
  }

  .links-panel {
    padding: var(--space-md);
  }

  .grain {
    opacity: 0.25;
  }
}

@media (min-width: 481px) {
  .container {
    padding-top: calc(clamp(14px, 2.6vh, 36px) + env(safe-area-inset-top));
    padding-bottom: calc(clamp(20px, 4vh, 48px) + env(safe-area-inset-bottom));
  }

  .shield-wrapper {
    width: clamp(116px, 13vw, 122px);
    margin-bottom: clamp(12px, 2vh, 32px);
  }

  .club-name {
    margin-bottom: clamp(7px, 1.3vh, 16px);
  }

  .tagline {
    font-size: 0.84rem;
    line-height: 1.55;
    margin-bottom: clamp(10px, 1.4vh, 24px);
  }

  .separator {
    margin-bottom: clamp(9px, 1.4vh, 24px);
  }

  .links-panel {
    max-width: 380px;
    padding: clamp(12px, 1.8vh, 20px) var(--space-lg) clamp(9px, 1.4vh, 18px);
  }

  .links {
    gap: clamp(10px, 1.5vh, 14px);
  }

  .link-btn {
    padding: clamp(11px, 1.8vh, 16px) var(--space-lg);
    border-radius: var(--radius-lg);
  }

  .link-btn--primary {
    padding: clamp(13px, 2.1vh, 20px) var(--space-lg);
  }

  .footer {
    padding-top: clamp(12px, 2vh, 28px);
  }
}


/* ---- Low-height landscape: light compaction, natural scroll ---- */
@media (orientation: landscape) and (max-height: 600px) {
  .container {
    justify-content: flex-start;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }

  .shield-wrapper {
    width: 80px;
    margin-bottom: 10px;
  }

  .club-name {
    font-size: 1.05rem;
    margin-bottom: 8px;
  }

  .tagline {
    font-size: 0.76rem;
    line-height: 1.55;
    margin-bottom: 10px;
  }

  .separator {
    margin-bottom: 10px;
  }

  .links-panel {
    max-width: 370px;
    padding: 12px 14px 10px;
  }

  .links {
    gap: 9px;
  }

  .link-btn {
    padding: 11px var(--space-md);
  }

  .link-btn--primary {
    padding: 13px var(--space-md);
  }

  .link-btn__icon {
    width: 32px;
    height: 32px;
  }

  .link-btn__title {
    font-size: 0.74rem;
  }

  .link-btn__subtitle {
    font-size: 0.64rem;
  }

  .footer {
    padding-top: 16px;
  }

  .scroll-hint.scroll-hint--visible {
    display: flex;
  }

  .scroll-hint__arrow {
    animation: hintBounce 1.6s ease-in-out infinite;
  }
}

@keyframes hintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}


/* ---- Scroll indicator (shown only when content overflows in low-height landscape) ---- */
.scroll-hint {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

.scroll-hint__arrow {
  font-size: 1rem;
  line-height: 1;
  color: rgba(212, 185, 106, 0.9);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.scroll-hint__label {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(240, 225, 161, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}


/* ---- Touch: no sticky hover on devices without a pointer ---- */
@media (hover: none) {
  .link-btn:hover,
  .link-btn--primary:hover,
  .link-btn--secondary:hover,
  .shield-logo:hover {
    transform: none;
  }

  .link-btn:hover .link-btn__arrow,
  .link-btn--primary:hover .link-btn__arrow,
  .link-btn--secondary:hover .link-btn__arrow {
    transform: none;
    color: inherit;
  }

  .link-btn:hover .link-btn__icon,
  .link-btn--secondary:hover .link-btn__icon {
    transform: none;
  }

  .link-btn--secondary:hover .link-btn__title,
  .link-btn--secondary:hover::before {
    color: inherit;
    opacity: inherit;
  }
}


/* ---- FOCUS STYLES (Accessibility) ---- */
.link-btn:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}


/* ---- SELECTION ---- */
::selection {
  background: rgba(197, 165, 90, 0.25);
  color: var(--text-primary);
}


/* ==== Shared rules / reduced motion ====
   Product decision: the brand intro and ambient animations stay on in every
   environment, so this only removes the low-height scroll hint. */

@media (prefers-reduced-motion: reduce) {
  .scroll-hint {
    display: none !important;
  }
}