/* ==========================================================================
   Depth — the vivid/3D layer

   main.css is the flat, correct design system. This file sits on top of it and
   adds elevation, gradient and motion. Kept separate for three reasons: main.css
   was already at 443 lines (rule 1), the whole layer can be dropped by removing
   one <link> if it ever fights readability, and everything here is decoration —
   nothing below changes what the page says or how it is read.

   Rules that apply to everything in this file:
   - Logical properties only (inset-inline-*), so Arabic mirrors for free.
   - Nothing here may reduce contrast on text a patient has to read.
   - All of it is switched off under prefers-reduced-motion at the bottom.
   ========================================================================== */

:root {
  /* Brand gradients. Two stops, never more — three starts to look like 2014. */
  --grad-blue:  linear-gradient(135deg, #1276CE 0%, #0B4E8F 100%);
  --grad-navy:  linear-gradient(135deg, #123C74 0%, #071D3D 100%);
  --grad-teal:  linear-gradient(135deg, #17B7B7 0%, #0B7C7C 100%);

  /* Elevation. Layered shadows read as real depth; a single blurred shadow
     reads as a drop shadow from 2008. The tinted ambient layer is what makes
     a card look lit rather than cut out. */
  --e1: 0 1px 2px rgba(11,44,91,.06), 0 2px 8px rgba(11,44,91,.05);
  --e2: 0 1px 2px rgba(11,44,91,.07), 0 6px 18px rgba(11,44,91,.08),
        0 12px 36px rgba(11,44,91,.05);
  --e3: 0 2px 4px rgba(11,44,91,.08), 0 12px 28px rgba(11,44,91,.12),
        0 28px 64px rgba(11,44,91,.10);

  /* Coloured glow, for the primary CTA only. Used anywhere else it becomes noise. */
  --glow-blue: 0 6px 20px rgba(11,99,176,.34);
  --glow-teal: 0 6px 20px rgba(15,158,158,.30);

  --ease-out: cubic-bezier(.2,.7,.3,1);
  --ease-spring: cubic-bezier(.34,1.42,.44,1);
}

/* --------------------------------------------------------------------------
   Ambient background

   A flat white page is what makes the site feel like a document rather than a
   product. Two very soft brand-coloured blooms, fixed behind everything, give
   the whole page a light source. Opacity is deliberately low — you should not
   be able to point at it, only notice the page is not flat.
   -------------------------------------------------------------------------- */

body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58vw 42vw at 82% -8%,  rgba(15,158,158,.10), transparent 60%),
    radial-gradient(52vw 46vw at 4% 6%,    rgba(11,99,176,.11),  transparent 62%),
    radial-gradient(64vw 50vw at 50% 104%, rgba(11,44,91,.07),   transparent 64%);
}

/* Sections that already carry their own colour must not stack a second wash. */
.section--tint, .hero { position: relative; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  box-shadow: var(--e2);
  transition: box-shadow .28s var(--ease-out), transform .28s var(--ease-out);
}

/* Lit top edge. One pixel, but it is most of what makes a surface look raised. */
.card::after {
  content: '';
  position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,.9) 18%, rgba(255,255,255,.9) 82%, transparent);
  pointer-events: none;
}
.card--flat { box-shadow: none; }
.card--flat::after { content: none; }

.card--link { transition: box-shadow .28s var(--ease-out), transform .28s var(--ease-out); }
.card--link:hover {
  box-shadow: var(--e3);
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  transition: transform .16s var(--ease-out), box-shadow .22s var(--ease-out),
              background-color .16s, border-color .16s;
}

.btn--primary {
  background: var(--grad-blue);
  box-shadow: var(--glow-blue), inset 0 1px 0 rgba(255,255,255,.20);
  border-color: transparent;
}
.btn--primary:hover {
  background: var(--grad-blue);
  filter: saturate(1.08) brightness(1.06);
  box-shadow: 0 10px 28px rgba(11,99,176,.42), inset 0 1px 0 rgba(255,255,255,.24);
  transform: translateY(-2px);
}
/* Press has to move down, or the button feels like a sticker. */
.btn--primary:active { transform: translateY(0); box-shadow: var(--e1); }

.btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--e1); }
.btn--ghost:active, .btn--white:active { transform: translateY(0); }

.btn--white {
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,.9);
}
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--e2); }

.btn[disabled], .btn[aria-disabled="true"] {
  box-shadow: none; transform: none; filter: none;
}

/* --------------------------------------------------------------------------
   Navigation — glass once the page has scrolled
   js/ui.js adds .is-stuck on scroll.
   -------------------------------------------------------------------------- */

.nav {
  transition: box-shadow .3s var(--ease-out), background-color .3s;
}
.nav.is-stuck {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: var(--e2);
}

/* --------------------------------------------------------------------------
   Numbered steps and stat tiles

   These are the two places where a little dimensionality pays for itself:
   they are glanceable, and a raised badge reads as a step in a sequence.
   -------------------------------------------------------------------------- */

.step__n, .tile__n, .badge--3d {
  background: var(--grad-blue);
  color: var(--white);
  box-shadow: var(--glow-blue), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-out);
}
.step:hover .step__n, .card--link:hover .tile__n {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 12px 26px rgba(11,99,176,.40), inset 0 1px 0 rgba(255,255,255,.3);
}

/* Teal variant, so not every accent on a page is the same blue. */
.step--teal .step__n, .badge--teal {
  background: var(--grad-teal);
  box-shadow: var(--glow-teal), inset 0 1px 0 rgba(255,255,255,.28);
}

/* --------------------------------------------------------------------------
   Media — photos should sit in the page, not float on it
   -------------------------------------------------------------------------- */

.hcard__img, .doc__photo {
  box-shadow: inset 0 0 0 1px rgba(11,44,91,.06);
  transition: transform .5s var(--ease-out), filter .4s;
}
/* The image grows inside a fixed frame — the card itself must clip it. */
.hcard, .doc { overflow: hidden; }
.card--link:hover .hcard__img,
.doc:hover .doc__photo { transform: scale(1.035); }

.doc {
  transition: box-shadow .28s var(--ease-out), transform .28s var(--ease-out);
}
.doc:hover { transform: translateY(-4px); box-shadow: var(--e3); }

/* --------------------------------------------------------------------------
   Reveal on scroll — main.css already fades; add depth to the motion
   -------------------------------------------------------------------------- */

.reveal {
  transform: translate3d(0, 18px, 0);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal.is-in { transform: translate3d(0, 0, 0); }

/* --------------------------------------------------------------------------
   Tilt — main.css/home.css only wired this to the hero card.
   js/ui.js now attaches [data-tilt] to feature cards site-wide.
   -------------------------------------------------------------------------- */

[data-tilt] {
  transform-style: preserve-3d;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  will-change: transform;
}
[data-tilt]:hover {
  transform: perspective(900px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateY(-4px);
  box-shadow: var(--e3);
}

/* --------------------------------------------------------------------------
   Ornamental motion

   Moved here from main.css, which had passed the 600-line rule. It belongs in
   this file by the same test as everything else above it: remove the <link>
   and the site is still complete, just still. (The .reveal entrances stay in
   main.css — an element that starts at opacity 0 needs something to turn it
   on, so they are not safe to make optional.)
   -------------------------------------------------------------------------- */

/* Headings draw their own underline as they arrive. This is what makes a
   section feel like it starts rather than simply existing. */
.section h2::after,
.mhead h2::after {
  content: ''; display: block; height: 3px; width: 0;
  margin-top: var(--s3); border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transition: width .8s cubic-bezier(.22,.61,.36,1) .15s;
}
.center h2::after { margin-inline: auto; }
.section h2.is-in::after, .mhead h2.is-in::after { width: 64px; }
.section--navy h2::after { background: linear-gradient(90deg, var(--teal), var(--blue-line)); }

/* Cards lift and warm on hover */
.card--link, .hcard, .dcard, .mitem, .steps .step {
  transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s;
}
.card--link:hover, .mitem:hover { transform: translateY(-4px); }
.hcard:hover { transform: translateY(-4px); box-shadow: var(--e3); }

/* Primary actions get a soft lift — the click target should feel physical */
.btn--primary { box-shadow: 0 4px 14px rgba(11,99,176,.28); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(11,99,176,.36); }
.btn--primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(11,99,176,.3); }
.btn { transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .2s; }

/* Footer: slow drifting light, the v2 "bubble" feel without the circus */
.footer { position: relative; overflow: hidden; isolation: isolate; }
.footer::before, .footer::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
}
.footer::before {
  width: 460px; height: 460px; top: -180px; inset-inline-start: -120px;
  background: rgba(11,99,176,.30); animation: drift 26s ease-in-out infinite;
}
.footer::after {
  width: 380px; height: 380px; bottom: -170px; inset-inline-end: -100px;
  background: rgba(15,158,158,.22); animation: drift 34s ease-in-out infinite reverse;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, 40px) scale(1.14); }
}

/* --------------------------------------------------------------------------
   Accessibility

   Everything above is decoration. Under reduced motion it all stops — the
   layout, colour and contrast are unchanged, which is the point.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .card, .card--link, .btn, .btn--primary, .btn--ghost, .btn--white,
  .step__n, .tile__n, .badge--3d, .hcard__img, .doc, .doc__photo,
  .reveal, [data-tilt] {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
  .card--link:hover, .btn--primary:hover, [data-tilt]:hover { transform: none !important; }
  .section h2::after, .mhead h2::after { width: 64px; transition: none; }
  .footer::before, .footer::after { animation: none; }
}

/* Windows high-contrast: drop the decoration entirely rather than fight it. */
@media (forced-colors: active) {
  body::before { display: none; }
  .card::after { content: none; }
  .btn--primary { background: ButtonFace; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   Fast appointment — the glass treatment.

   Decoration only, like the rest of this file: delete the <link> and the form
   still works, still submits, still reads correctly. Nothing here changes a
   hit area or a contrast ratio that main.css did not already set.

   The calendar is the piece that carries it. It is the part of the page a
   patient looks at longest and the part that has to feel like a real booking
   surface rather than a fieldset, so it gets the frosted panel, the inner
   highlight and the lift on the chosen hour.
   -------------------------------------------------------------------------- */

.apt {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96));
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 40px -22px rgba(15,42,80,.35),
    0 2px 10px -4px rgba(15,42,80,.12);
}

.aptcal {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(236,242,249,.75));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-color: rgba(255,255,255,.85);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 10px 28px -16px rgba(15,42,80,.4);
}

/* A cool sheen across the top edge — the "glass" read, one gradient deep. */
.aptcal::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 46%;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), transparent);
  pointer-events: none;
}
.aptcal > * { position: relative; }

.aptcal__slot {
  background: linear-gradient(180deg, #fff, #f4f7fb);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,42,80,.08);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.aptcal__slot:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(15,42,80,.3); }

/* The chosen hour is the only thing on the panel that lifts off it. */
.aptcal__slot[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--blue), #14538f);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 8px 18px -8px rgba(11,74,144,.75);
  transform: translateY(-1px);
}

.aptcal__day[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255,255,255,.9), var(--blue-soft));
  box-shadow: 0 6px 14px -10px rgba(15,42,80,.45);
}
.aptcal__nav {
  background: linear-gradient(180deg, #fff, #eef3f9);
  box-shadow: 0 1px 2px rgba(15,42,80,.14);
}
.aptcal__nav:hover:not(:disabled) { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .aptcal__slot, .aptcal__nav { transition: none; }
  .aptcal__slot:hover, .aptcal__nav:hover, .aptcal__slot[aria-pressed="true"] { transform: none; }
}