@import url("tailwind.d81278d36806.css");

:root {
  --color-ink: #111111;
  --color-paper: #f9f9f7;
  --color-mist: #626661;
  --color-field: #336633;
  --color-clay: #c46a2e;
  --color-signal: #ffd166;
  --color-drift: #ffccff;
  --color-soft: #f7bef7;
  --color-club: #1d4ed8;
  --color-club-dark: #0b1220;

  --font-sans: "Inter", sans-serif;
  --font-display: "Montserrat", sans-serif;

  --shadow-quiet: 0 18px 50px rgba(17, 17, 17, 0.07);
}

@layer base {
  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 900;
  }
}

@layer utilities {
  .bg-paper {
    background-color: var(--color-paper);
  }

  .bg-ink {
    background-color: var(--color-ink);
  }

  .bg-field {
    background-color: var(--color-field);
  }

  .bg-clay {
    background-color: var(--color-clay);
  }

  .bg-signal {
    background-color: var(--color-signal);
  }

  .bg-drift {
    background-color: var(--color-drift);
  }

  .bg-soft {
    background-color: var(--color-soft);
  }

  .bg-club {
    background-color: var(--color-club);
  }

  .bg-clubDark {
    background-color: var(--color-club-dark);
  }

  .text-ink {
    color: var(--color-ink);
  }

  .text-paper {
    color: var(--color-paper);
  }

  .text-mist {
    color: var(--color-mist);
  }

  .text-field {
    color: var(--color-field);
  }

  .text-clay {
    color: var(--color-clay);
  }

  .text-club {
    color: var(--color-club);
  }

  .border-club {
    border-color: var(--color-club);
  }

  .border-mist\/20 {
    border-color: rgba(98, 102, 97, 0.2);
  }

  .border-ink\/10 {
    border-color: rgba(17, 17, 17, 0.1);
  }

  .text-ink\/45 {
    color: rgba(17, 17, 17, 0.45);
  }

  .text-ink\/55 {
    color: rgba(17, 17, 17, 0.55);
  }

  .text-ink\/70 {
    color: rgba(17, 17, 17, 0.7);
  }

  .text-white\/70 {
    color: rgba(255, 255, 255, 0.7);
  }

  .text-white\/80 {
    color: rgba(255, 255, 255, 0.8);
  }

  .text-white\/5 {
    color: rgba(255, 255, 255, 0.05);
  }

  .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05);
  }

  .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .bg-white\/15 {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .bg-white\/60 {
    background-color: rgba(255, 255, 255, 0.6);
  }

  .bg-white\/70 {
    background-color: rgba(255, 255, 255, 0.7);
  }

  .bg-white\/72 {
    background-color: rgba(255, 255, 255, 0.72);
  }

  .border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1);
  }

  .border-white\/15 {
    border-color: rgba(255, 255, 255, 0.15);
  }

  .border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
  }

  .border-white\/60 {
    border-color: rgba(255, 255, 255, 0.6);
  }

  .ring-white\/20 {
    --tw-ring-color: rgba(255, 255, 255, 0.2);
  }

  .font-display {
    font-family: var(--font-display);
  }

  .shadow-quiet {
    box-shadow: var(--shadow-quiet);
  }

  .shadow-soft {
    box-shadow: var(--shadow-quiet);
  }

  .jit-header {
    transition:
      transform 820ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 820ms ease;
    will-change: transform, opacity;
  }

  .header-visible {
    transform: translateY(0);
    opacity: 1;
  }

  .header-hidden {
    transform: translateY(calc(-100% - 0.75rem));
    opacity: 0.24;
    pointer-events: none;
  }

  .hero-glow-anchor {
    left: 49%;
    top: 44%;
    width: 0;
    height: 0;
  }

  .hero-glow {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 9999px;
    mix-blend-mode: screen;
    transform-origin: center bottom;
    animation: hero-glow-breathe 6s ease-in-out infinite;
  }

  .hero-glow-core {
    width: clamp(104px, 15vw, 176px);
    height: clamp(104px, 15vw, 176px);
    background:
      radial-gradient(ellipse at center 82%, rgba(255, 248, 219, 0.96) 0%, rgba(255, 209, 102, 0.74) 18%, rgba(196, 106, 46, 0.22) 44%, rgba(196, 106, 46, 0) 74%);
    filter: blur(18px);
    opacity: 0.84;
    transform: translate(-50%, -58%);
  }

  .hero-glow-halo {
    width: clamp(188px, 28vw, 340px);
    height: clamp(188px, 28vw, 340px);
    background:
      radial-gradient(ellipse at center 86%, rgba(255, 209, 102, 0.22) 0%, rgba(196, 106, 46, 0.11) 38%, rgba(196, 106, 46, 0) 74%);
    filter: blur(34px);
    opacity: 0.64;
    transform: translate(-50%, -56%);
    animation-duration: 6s;
    animation-delay: -0.9s;
  }

  @keyframes hero-glow-breathe {
    0%,
    100% {
      scale: 0.82;
      opacity: 0.58;
    }

    50% {
      scale: 1.16;
      opacity: 0.96;
    }
  }

  @media (min-width: 768px) {
    .hero-glow-anchor {
      left: 50.5%;
      top: 47%;
    }
  }

  .image-spread {
    --spread-left-x: -78%;
    --spread-middle-x: -50%;
    --spread-right-x: -22%;
    --spread-left-y: 34px;
    --spread-middle-y: 0px;
    --spread-right-y: 42px;
    --spread-left-rot: -4deg;
    --spread-middle-rot: 0.5deg;
    --spread-right-rot: 4deg;
  }

  .image-card {
    --card-x: -50%;
    --card-y: 18px;
    --card-rot: 0deg;
    --card-lift: 0px;
    --card-rot-hover: 0deg;
    position: absolute;
    left: 50%;
    top: 0;
    width: min(58vw, 250px);
    opacity: 0;
    transform:
      translateX(-50%)
      translateY(42px)
      rotate(0deg);
    transition:
      transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 900ms ease,
      box-shadow 360ms ease,
      border-color 360ms ease;
    will-change: transform, opacity;
  }

  .image-card-frame {
    overflow: hidden;
    border: 1px solid rgb(17 17 17 / 0.1);
    border-radius: 24px;
    background: rgb(255 255 255 / 0.92);
    padding: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  }

  .image-card-media {
    aspect-ratio: 4 / 5;
    width: 100%;
    border-radius: 16px;
    background: var(--color-paper);
    object-fit: contain;
    object-position: center;
    display: block;
  }

  .image-card-media-fill {
    height: 100%;
    object-fit: cover;
  }

  .image-card-left {
    z-index: 1;
  }

  .image-card-middle {
    z-index: 3;
  }

  .image-card-right {
    z-index: 2;
  }

  .image-spread.is-visible .image-card {
    opacity: 1;
    transform:
      translateX(var(--card-x))
      translateY(calc(var(--card-y) + var(--card-lift)))
      rotate(calc(var(--card-rot) + var(--card-rot-hover)));
  }

  .image-spread.is-visible .image-card-left {
    --card-x: var(--spread-left-x);
    --card-y: var(--spread-left-y);
    --card-rot: var(--spread-left-rot);
    transition-delay: 0ms;
  }

  .image-spread.is-visible .image-card-middle {
    --card-x: var(--spread-middle-x);
    --card-y: var(--spread-middle-y);
    --card-rot: var(--spread-middle-rot);
    transition-delay: 80ms;
  }

  .image-spread.is-visible .image-card-right {
    --card-x: var(--spread-right-x);
    --card-y: var(--spread-right-y);
    --card-rot: var(--spread-right-rot);
    transition-delay: 140ms;
  }

  .image-card:hover {
    --card-lift: -10px;
  }

  .image-card-left:hover {
    --card-rot-hover: -1deg;
  }

  .image-card-middle:hover,
  .image-card-right:hover {
    --card-rot-hover: 1deg;
  }

  @media (min-width: 768px) {
    .image-spread {
      --spread-left-x: -108%;
      --spread-middle-x: -50%;
      --spread-right-x: 8%;
      --spread-left-y: 28px;
      --spread-middle-y: 0px;
      --spread-right-y: 18px;
      --spread-left-rot: -7deg;
      --spread-middle-rot: 1.5deg;
      --spread-right-rot: 6deg;
    }

    .image-card {
      width: min(30vw, 332px);
    }
  }

  .network-select {
    appearance: none;
    align-items: center;
    border-width: 1px;
    border-color: rgb(17 17 17 / 0.08);
    border-radius: 1.5rem;
    background: linear-gradient(180deg, rgba(249, 249, 247, 0.96), rgba(255, 255, 255, 0.92));
    color: var(--color-ink);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.72),
      0 10px 24px rgba(17, 17, 17, 0.045);
    transition:
      border-color 220ms ease,
      box-shadow 220ms ease,
      background-color 220ms ease,
      transform 220ms ease;
  }

  .network-select:focus,
  .network-select:focus-visible {
    border-color: rgb(51 102 51 / 0.44);
    box-shadow:
      0 0 0 4px rgba(51, 102, 51, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.76),
      0 12px 28px rgba(17, 17, 17, 0.05);
  }

  [data-network-picker].is-open [data-network-chevron] {
    transform: rotate(180deg);
  }

  .network-options {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.65rem);
    z-index: 30;
    overflow: hidden;
    border: 1px solid rgb(17 17 17 / 0.08);
    border-radius: 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 249, 247, 0.96));
    box-shadow:
      0 18px 48px rgba(17, 17, 17, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
    padding: 0.5rem;
  }

  .network-option {
    display: block;
    width: 100%;
    border-radius: 1rem;
    color: var(--color-ink);
    padding: 0.85rem 0.95rem;
    text-align: left;
    transition:
      background-color 180ms ease,
      color 180ms ease;
  }

  .network-option:hover,
  .network-option:focus-visible {
    background: rgb(255 204 255 / 0.42);
    color: var(--color-ink);
    outline: none;
  }

  .network-option.is-selected {
    background: rgb(51 102 51 / 0.1);
    color: var(--color-field);
    font-weight: 700;
  }

  .network-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    border: 1px solid rgb(17 17 17 / 0.08);
    border-radius: 1.5rem;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 249, 247, 0.94));
    padding: 1.35rem;
    box-shadow:
      0 16px 44px rgba(0, 0, 0, 0.045),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition:
      border-color 220ms ease,
      background-color 220ms ease,
      box-shadow 220ms ease;
  }

  .network-meta {
    color: rgb(98 102 97 / 0.9);
  }

  .network-meta dt,
  .network-meta dd {
    margin: 0;
  }

  .network-price {
    color: var(--color-field);
    font-size: 1rem;
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.02em;
    white-space: nowrap;
  }

  .network-cta {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid rgb(0 0 0);
    border-radius: 1rem;
    background: var(--color-drift);
    color: var(--color-ink);
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    transition:
      background-color 240ms ease,
      color 240ms ease,
      border-color 240ms ease;
  }

  .network-cta:hover {
    background: var(--color-soft);
    color: var(--color-ink);
  }

  .hover\:bg-field:hover {
    background-color: var(--color-field);
  }

  .hover\:bg-soft:hover {
    background-color: var(--color-soft);
  }

  .hover\:text-field:hover {
    color: var(--color-field);
  }

  .hover\:text-mist:hover {
    color: var(--color-mist);
  }

  .hover\:text-ink:hover {
    color: var(--color-ink);
  }

  .focus-visible\:outline-ink:focus-visible {
    outline-color: var(--color-ink);
  }

  @media (prefers-reduced-motion: reduce) {
    .jit-header {
      transition: none;
    }

    .hero-glow-anchor {
      display: none;
    }

    .image-card {
      opacity: 1;
      transition: none;
    }

    .image-spread .image-card-left {
      transform: translateX(var(--spread-left-x)) translateY(var(--spread-left-y)) rotate(var(--spread-left-rot));
    }

    .image-spread .image-card-middle {
      transform: translateX(var(--spread-middle-x)) translateY(var(--spread-middle-y)) rotate(var(--spread-middle-rot));
    }

    .image-spread .image-card-right {
      transform: translateX(var(--spread-right-x)) translateY(var(--spread-right-y)) rotate(var(--spread-right-rot));
    }

    .network-card,
    .network-cta,
    .network-select,
    .network-option {
      transition: none;
    }
  }
}