/* ==========================================================================
   CancelTimer Global, Brand & Component Styles
   File: public/styles.css
   ========================================================================== */

:root {
  --roller-h: 2.2rem;
}

@media (max-width: 640px) {
  :root {
    --roller-h: 1.75rem;
  }
}

html {
  scroll-behavior: smooth;
}

.tabular-nums,
.font-mono {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Brand Identity: C-Clock Icon & Logo Lockup
   -------------------------------------------------------------------------- */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.brand-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: rgb(225, 29, 72); /* rose-600 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

/* Header size (8x8 tailwind equivalent = 2rem) */
.brand-icon-box.brand-icon-md {
  width: 2rem;
  height: 2rem;
}

.brand-icon-box.brand-icon-md .brand-svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Footer / compact size (6x6 tailwind equivalent = 1.5rem) */
.brand-icon-box.brand-icon-sm {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
}

.brand-icon-box.brand-icon-sm .brand-svg {
  width: 0.875rem;
  height: 0.875rem;
}

.brand-svg {
  color: #ffffff;
  display: block;
}

.brand-text {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: rgb(2, 6, 23); /* slate-950 */
}

.brand-text .accent {
  color: rgb(225, 29, 72); /* rose-600 */
}

/* --------------------------------------------------------------------------
   Hero Headline & Roller Stack
   -------------------------------------------------------------------------- */
.hero-headline {
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.hero-subroller {
  font-size: clamp(1rem, 3.4vw, 1.45rem);
}

.roller-wrapper {
  display: inline-block;
  height: var(--roller-h);
  line-height: var(--roller-h);
  overflow: hidden;
  vertical-align: middle;
}

.roller-track {
  display: flex;
  flex-direction: column;
  animation: verticalRoll 22s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.roller-item {
  height: var(--roller-h);
  line-height: var(--roller-h);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

@keyframes verticalRoll {
  0%, 8.5%     { transform: translateY(0%); }
  11.1%, 19.6% { transform: translateY(-10%); }
  22.2%, 30.7% { transform: translateY(-20%); }
  33.3%, 41.8% { transform: translateY(-30%); }
  44.4%, 52.9% { transform: translateY(-40%); }
  55.5%, 64%   { transform: translateY(-50%); }
  66.6%, 75.1% { transform: translateY(-60%); }
  77.7%, 86.2% { transform: translateY(-70%); }
  88.8%, 97.3% { transform: translateY(-80%); }
  100%         { transform: translateY(-90%); }
}

/* --------------------------------------------------------------------------
   Ghost Background Timer
   -------------------------------------------------------------------------- */
.bg-timer-text {
  font-size: clamp(3.8rem, 15vw, 9.2rem);
  color: rgba(225, 29, 72, 0.11);
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Interactive States & Utilities
   -------------------------------------------------------------------------- */
.shadow-2xs {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-xs {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
}

.notice-pill {
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}