:root {
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-medium: 400ms;
  --t-slow: 600ms;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --brand-pink: #C3708C;
}

/* === GLOBAL CURSOR HIDE — DO NOT REMOVE === */
@media (hover: hover) and (pointer: fine) {
  html,
  body,
  *,
  *::before,
  *::after,
  *:hover,
  *:focus,
  *:active,
  *:visited,
  *:disabled,
  a, a:hover, a:active, a:focus, a:visited,
  button, button:hover, button:active, button:focus, button:focus-visible, button:disabled,
  input, input:hover, input:focus, input:focus-visible, input:disabled,
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="password"], input[type="submit"], input[type="button"],
  input[type="checkbox"], input[type="radio"], input[type="file"], input[type="date"],
  textarea, textarea:hover, textarea:focus, textarea:focus-visible,
  select, select:hover, select:focus, select:focus-visible,
  option,
  label, label:hover,
  summary, details,
  fieldset, legend,
  [role="button"], [role="link"], [role="textbox"], [role="checkbox"], [role="radio"],
  [role="menu"], [role="menuitem"], [role="tab"], [role="option"],
  [contenteditable], [contenteditable="true"],
  [draggable="true"],
  [tabindex],
  iframe,
  video,
  audio,
  canvas,
  svg, svg *,
  img,
  ::selection {
    cursor: none !important;
  }

  /* Also explicitly override common cursor values that frameworks/libraries set */
  .cursor-pointer,
  .cursor-text,
  .cursor-wait,
  .cursor-help,
  .cursor-not-allowed,
  .cursor-grab,
  .cursor-grabbing,
  .cursor-move,
  .cursor-crosshair,
  .cursor-default,
  .cursor-auto,
  [class*="cursor-"] {
    cursor: none !important;
  }
}

/* Hide scrollbar completely to make page flush with the right edge */
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}
html, body {
  -ms-overflow-style: none !important;  /* IE and Edge */
  scrollbar-width: none !important;     /* Firefox */
}

@media (hover: hover) and (pointer: fine) {

  .cursor-dot {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand-pink);
    pointer-events: none !important;
    z-index: 2147483647 !important;
    transform: translate(-50%, -50%);
    transition: width var(--t-base) var(--ease-out-expo),
                height var(--t-base) var(--ease-out-expo),
                background-color var(--t-base) var(--ease-out-expo),
                border var(--t-base) var(--ease-out-expo),
                opacity var(--t-fast) ease;
    will-change: transform;
  }

  .cursor-dot.is-hovering {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid var(--brand-pink);
  }

  .cursor-halo {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(195, 112, 140, 0.06) 0%,
      rgba(195, 112, 140, 0) 70%
    );
    pointer-events: none !important;
    z-index: 2147483646 !important;
    transform: translate(-50%, -50%);
    transition: opacity var(--t-fast) ease;
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-halo { display: none !important; }
  body { cursor: auto !important; }
}

/* Hover Micro-interactions */
@media (hover: hover) {
  /* Card Lift */
  .bg-white.rounded-2xl.shadow-sm,
  .bg-white.rounded-3xl.shadow-lg,
  .bg-white.rounded-2xl.shadow-md {
    transition: transform var(--t-base) var(--ease-out-expo),
                box-shadow var(--t-base) var(--ease-out-expo) !important;
  }

  .bg-white.rounded-2xl.shadow-sm:hover,
  .bg-white.rounded-3xl.shadow-lg:hover,
  .bg-white.rounded-2xl.shadow-md:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10) !important;
  }

  /* Image Zoom */
  .overflow-hidden img {
    transition: transform var(--t-slow) var(--ease-out-expo) !important;
  }
  .overflow-hidden:hover img {
    transform: scale(1.08) !important;
  }

  /* Two-Tone Button Sweep */
  button.bg-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  button.bg-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    transform: translateX(-101%);
    transition: transform var(--t-base) var(--ease-out-expo);
    z-index: -1;
    pointer-events: none;
  }
  button.bg-primary:hover::before {
    transform: translateX(0);
  }

  /* Animated Underlines */
  nav a:not([class*="btn"]):not([class*="bg-"]),
  footer a:not([class*="btn"]):not([class*="bg-"]) {
    position: relative;
    text-decoration: none;
  }
  nav a:not([class*="btn"]):not([class*="bg-"])::after,
  footer a:not([class*="btn"]):not([class*="bg-"])::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width var(--t-base) var(--ease-out-expo);
  }
  nav a:not([class*="btn"]):not([class*="bg-"]):hover::after,
  footer a:not([class*="btn"]):not([class*="bg-"]):hover::after {
    width: 100%;
  }

  /* Icon Nudge */
  a:hover svg.lucide-arrow-right,
  button:hover svg.lucide-arrow-right {
    transform: translateX(4px) !important;
  }
  a svg.lucide-arrow-right,
  button svg.lucide-arrow-right {
    transition: transform var(--t-fast) var(--ease-out-expo) !important;
  }
}

/* Header Glass Morph — applies only on tablet/desktop */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  header {
    transition:
      padding-top 800ms cubic-bezier(0.22, 1, 0.36, 1),
      padding-bottom 800ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 800ms cubic-bezier(0.22, 1, 0.36, 1),
      backdrop-filter 800ms cubic-bezier(0.22, 1, 0.36, 1),
      -webkit-backdrop-filter 800ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 800ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: padding, background-color;
  }

  header a:first-child img {
    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    transform-origin: left center;
    will-change: transform;
  }

  header.is-scrolled {
    padding-top: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem) !important;
    padding-bottom: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem) !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(24px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.04),
      0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }

  header.is-scrolled a:first-child img {
    transform: scale(0.88) !important;
  }
}

/* Reduced motion: instant state change, no transition */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(24px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    box-shadow:
      0 1px 0 rgba(0, 0, 0, 0.04),
      0 4px 16px rgba(0, 0, 0, 0.04) !important;
  }
}

/* Mobile: no scroll morph, header behaves as before */
@media (max-width: 767px) {
  header,
  header.is-scrolled {
    /* No overrides — preserves existing mobile behavior */
  }
}