@import url('./style-base.css');

/* First-paint fallback for the Paper MeshGradient hero. */
.hero-topline {
  background-color: transparent !important;
  background-image: none !important;
}

.hero {
  background-color: #000000 !important;
  background-image:
    radial-gradient(ellipse at 18% 18%, #06b6d4 0%, rgba(6, 182, 212, 0.34) 24%, transparent 55%),
    radial-gradient(ellipse at 82% 24%, #22d3ee 0%, rgba(34, 211, 238, 0.30) 23%, transparent 54%),
    radial-gradient(ellipse at 56% 78%, #0891b2 0%, rgba(8, 145, 178, 0.28) 27%, transparent 58%),
    radial-gradient(ellipse at 40% 52%, #164e63 0%, rgba(22, 78, 99, 0.30) 31%, transparent 61%),
    linear-gradient(180deg, #000000 0%, #000000 100%) !important;
  isolation: isolate;
  padding-top: 96px;
}

.hero > .hero-glow {
  display: none !important;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero .hero-panorama-fade--left,
.hero .hero-panorama-fade--right,
.hero .hero-panorama-glow {
  display: none !important;
}

.hero .hero-shot {
  box-shadow: none !important;
}

.hero .hero-shot::after {
  background: transparent !important;
}

.hero-panorama-viewport {
  transform: translateY(-58px) !important;
}

/* Transparent floating oval navigation, overlaid on the hero. */
.header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  background: transparent !important;
  pointer-events: none;
}

.header .container {
  pointer-events: auto;
  background-color: rgba(7, 11, 12, 0.46) !important;
  background-image: linear-gradient(
    110deg,
    rgba(3, 7, 8, 0.68) 0%,
    rgba(13, 24, 26, 0.48) 48%,
    rgba(3, 7, 8, 0.62) 100%
  ) !important;
  border: none !important;
  outline: none !important;
  border-radius: 999px !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
  box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.72) !important;
}

/* Keep only the countdown inside the fixed discount bar -- popup-timer
   is shown again (client now wants the timer + instant-access line
   visible inside the popup itself, not just the sticky bar). */
.price-box-timer,
.price-box-clock,
.mini-timer {
  display: none !important;
}

.sticky-bar-timer {
  display: flex !important;
}

/* Runtime-upgraded controls keep the existing visual language. */
.sticky-bar-inner,
.case-fan-card,
.case-fan-dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font: inherit;
  color: inherit;
}

button.sticky-bar-inner {
  width: 100%;
  background: transparent;
}

.case-fan-card {
  padding: 2px;
  background: transparent;
  cursor: pointer;
}

.case-fan-dot {
  padding: 0;
  cursor: pointer;
}

/* Cases: one adaptive interaction model for touch, keyboard and pointer input. */
.case-fan-layout {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  overflow: visible;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior-x: contain;
}

.case-fan-layout.is-dragging {
  cursor: grabbing;
}

.case-fan-card {
  width: clamp(7.4rem, 11vw, 11rem);
  min-height: 44px;
  transform-origin: 50% 82%;
  will-change: transform;
  transition:
    transform 0.44s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease,
    opacity 0.28s ease;
  -webkit-tap-highlight-color: transparent;
}

.case-fan-card[aria-pressed='true'] {
  box-shadow: 0 28px 52px -18px rgba(21, 17, 15, 0.58);
}

.case-fan-detail {
  min-height: 8.4rem;
}

.case-fan-nav {
  max-width: 100%;
}

.case-fan-dots {
  max-width: min(56vw, 360px);
  padding: 6px 2px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.case-fan-dots::-webkit-scrollbar {
  display: none;
}

.case-fan-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  scroll-snap-align: center;
}

.case-fan-arrow {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
}

.contact-note {
  margin: 10px auto 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: center;
  text-transform: none;
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--gold-light, #e8d5a8) !important;
  outline-offset: 4px;
}

/* Remove the pale body gutter below the footer; keep safe space inside the dark footer. */
body {
  padding-bottom: 0 !important;
}

.footer {
  padding-bottom: 90px !important;
}

@keyframes hero-mobile-gold-edge {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Narrow phones: one dominant case with two readable neighbours. */
@media (max-width: 479px) {
  .case-fan-layout {
    height: clamp(13.5rem, 61vw, 16.5rem);
    width: calc(100% + 12px);
    margin-inline: -6px;
  }

  .case-fan-card {
    width: clamp(7rem, 35vw, 8.4rem);
  }

  .case-fan-card-name {
    font-size: 0.9rem;
    line-height: 1.05;
  }

  .case-fan-card-visual {
    padding: 10px;
  }

  .case-fan-detail {
    min-height: 10.5rem;
    margin-top: 18px;
    padding-inline: 6px;
  }

  .case-fan-detail p {
    font-size: 0.9rem;
  }

  .case-fan-nav {
    width: 100%;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
  }

  .case-fan-dots {
    max-width: calc(100vw - 150px);
    gap: 7px;
  }
}

/* Large phones and small tablets: three-card fan with more breathing room. */
@media (min-width: 480px) and (max-width: 767px) {
  .case-fan-layout {
    height: clamp(15rem, 47vw, 18rem);
  }

  .case-fan-card {
    width: clamp(8.1rem, 26vw, 9.8rem);
  }

  .case-fan-detail {
    min-height: 9.4rem;
    margin-top: 20px;
  }
}

/* Tablets and compact laptops: five-card fan. */
@media (min-width: 768px) and (max-width: 1023px) {
  .case-fan-layout {
    height: clamp(18rem, 36vw, 21rem);
  }

  .case-fan-card {
    width: clamp(8.8rem, 16vw, 10.2rem);
  }

  .case-fan-detail {
    min-height: 8.8rem;
  }
}

/* Desktop and wide desktop retain seven cards but scale fluidly. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .case-fan-layout {
    height: clamp(20rem, 25vw, 23rem);
  }
}

@media (min-width: 1440px) {
  .case-fan-layout {
    height: 24rem;
  }

  .case-fan-card {
    width: 11.4rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .case-fan-card:hover {
    box-shadow: 0 20px 40px -18px rgba(21, 17, 15, 0.45);
  }
}

@media (max-width: 700px) {
  .hero {
    padding-top: 80px;
  }

  .hero-panorama-shell {
    margin-top: 28px !important;
    margin-bottom: calc(18vw - 28px) !important;
  }

  .hero-panorama-viewport {
    transform: none !important;
  }

  .hero-shot {
    overflow: hidden !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .hero-shot img {
    width: calc(100% + 4px) !important;
    height: calc(100% + 4px) !important;
    max-width: none !important;
    margin: -2px !important;
    border-radius: 0 !important;
    object-fit: cover !important;
  }

  .hero-shot::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border: 1px solid transparent;
    border-radius: inherit;
    background: linear-gradient(115deg, #4c3723 0%, #6a4b2b 28%, #d8bd83 48%, #8b673c 58%, #4c3723 78%, #b99557 100%) border-box;
    background-size: 240% 240%;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: hero-mobile-gold-edge 4.2s linear infinite;
  }

  .hero-shot::after {
    z-index: 3;
  }

  /* The WebGL mesh-gradient shader is skipped entirely below 700px (see
     hero-shader-background.js) because it stutters and pixelates on weak
     mobile GPUs. This is a cheap, compositor-only replacement: three
     blurred radial-gradient blobs drifting via `transform` only (no
     canvas, no per-pixel repaint, nothing that can fall behind and turn
     blocky) layered on top of the static fallback gradient above so the
     mobile hero isn't fully static either. */
  .hero::before,
  .hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    width: 78vw;
    height: 78vw;
    border-radius: 50%;
    filter: blur(46px);
    pointer-events: none;
    will-change: transform;
  }

  .hero::before {
    top: -6vw;
    left: -16vw;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.75) 0%, rgba(6, 182, 212, 0.32) 45%, transparent 74%);
    animation: hero-mobile-blob-a 7s ease-in-out infinite;
  }

  .hero::after {
    top: 14vw;
    right: -20vw;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.7) 0%, rgba(34, 211, 238, 0.3) 45%, transparent 74%);
    animation: hero-mobile-blob-b 8.5s ease-in-out infinite;
  }

  .hero > .hero-glow {
    display: block !important;
    top: 62% !important;
    left: 48% !important;
    width: 82vw !important;
    height: 82vw !important;
    background: radial-gradient(circle, rgba(8, 145, 178, 0.7) 0%, rgba(8, 145, 178, 0.28) 45%, transparent 74%) !important;
    filter: blur(46px) !important;
    animation: hero-mobile-blob-c 10s ease-in-out infinite;
  }

  @keyframes hero-mobile-blob-a {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.75; }
    50% { transform: translate(20vw, 16vw) scale(1.35); opacity: 1; }
  }

  @keyframes hero-mobile-blob-b {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.75; }
    50% { transform: translate(-18vw, 20vw) scale(1.3); opacity: 1; }
  }

  @keyframes hero-mobile-blob-c {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    50% { transform: translate(-38%, -62%) scale(1.4); opacity: 1; }
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* Deliberate exception: the mobile hero background blobs are purely
     decorative (no parallax, no scroll-linking, slow blurred drift) and
     the client wants them running for every visitor, so they opt back
     out of the reduce-motion kill switch above. */
  .hero::before {
    animation-duration: 7s !important;
    animation-iteration-count: infinite !important;
  }

  .hero::after {
    animation-duration: 8.5s !important;
    animation-iteration-count: infinite !important;
  }

  .hero > .hero-glow {
    animation-duration: 10s !important;
    animation-iteration-count: infinite !important;
  }

  .case-fan-card {
    transition: none;
  }
}