/* Homepage motion tokens (production copy of the accepted prototype Revision 3).
   Every duration, delay, distance, glow strength and easing used by motion-homepage.css lives here, so the whole system can be
   tuned (or removed) in one place. Loaded only by index.php (home-motion.css). */
:root {
  /* easing: one restrained expo-out curve for movement, one soft in-out for light travelling over metal. No overshoot anywhere. */
  --hm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hm-ease-light: cubic-bezier(0.45, 0.05, 0.25, 1);

  /* interaction durations */
  --hm-t-fast: 200ms;      /* press, small state changes (160-250) */
  --hm-t-hover: 300ms;     /* hover / focus (250-350) */
  --hm-t-reveal: 560ms;    /* section / card entrance (450-650) */

  /* distances and scales */
  --hm-dy: 12px;           /* entrance travel (8-16) */
  --hm-card-lift: 3px;     /* destination-card lift (2-4) */
  --hm-card-scale: 1.03;   /* destination-card photo scale (1.01-1.03) */
  --hm-card-stagger: 70ms;

  /* light strength: 1 = full desktop; mobile profile lowers it */
  --hm-glow: 1;
  --hm-ambient-rest: 0.1;       /* resting strength of the environmental light layer (was 0.8: it lifted the ball region about 24 % above the photograph) */

  /* hero timeline (desktop) - total about 1.9 s */
  --hm-h-ambient: 1000ms;        --hm-h-ambient-delay: 0ms;
  --hm-h-settle: 1700ms;         /* one-time photo settle (scale 1.03 -> 1) */
  --hm-h-eyebrow: 520ms;         --hm-h-eyebrow-delay: 900ms;
  --hm-h-line: 640ms;            --hm-h-line1-delay: 1000ms;  --hm-h-line2-delay: 1100ms;
  --hm-h-sweep: 700ms;           --hm-h-sweep1-delay: 1700ms;  --hm-h-sweep2-delay: 1800ms;
  --hm-h-desc: 520ms;            --hm-h-desc-delay: 1500ms;
  --hm-h-actions: 520ms;         --hm-h-actions-delay: 1650ms;
  --hm-h-cta-glow: 600ms;        --hm-h-cta-glow-delay: 1900ms;
  --hm-sweep-alpha-silver: 0.8;
  --hm-sweep-alpha-crimson: 0.72;
  --hm-hero-scale-from: 1.03;
}

/* tablet and phone: a shorter, quieter sequence (about 1.15 s), no photo movement, lower glow, faster and subtler reflection */
@media (max-width: 768px) {
  :root {
    --hm-glow: 0.6;
    --hm-ambient-rest: 0.55;
    --hm-dy: 8px;
    --hm-card-stagger: 50ms;
    --hm-t-reveal: 460ms;
    --hm-h-ambient: 700ms;
    --hm-h-eyebrow: 380ms;   --hm-h-eyebrow-delay: 650ms;
    --hm-h-line: 460ms;      --hm-h-line1-delay: 1000ms; --hm-h-line2-delay: 1080ms;
    --hm-h-sweep: 520ms;     --hm-h-sweep1-delay: 1500ms; --hm-h-sweep2-delay: 1580ms;
    --hm-h-desc: 380ms;      --hm-h-desc-delay: 1250ms;
    --hm-h-actions: 380ms;   --hm-h-actions-delay: 1350ms;
    --hm-h-cta-glow: 520ms;  --hm-h-cta-glow-delay: 1650ms;
    --hm-sweep-alpha-silver: 0.7;
    --hm-sweep-alpha-crimson: 0.5;
    --hm-hero-scale-from: 1;
  }
}

/* ---- hero diamond glints (hm-gl-*) ----
   14 individual red crystal flashes (4- and 6-point stars, thin refraction streaks, tiny hot-red core, tight crimson halo), each placed on a
   real shard of the photograph (includes/home-glints.php; positions in ball radii from the ball centre, measured per crop by home-motion.js).
   They ignite one after another from left to right, 120-240 ms each, about 2.0 s for the whole passage, then nothing is left on screen.
   The photograph itself is never dimmed, tinted or masked to make them visible. */
:root {
  --hm-gl-start: 480ms;      /* the passage begins as the headline starts to reveal */
}

@media (max-width: 768px) {
  :root {
    --hm-gl-start: 450ms;
  }
}

/* Homepage motion + final layout polish. Loaded ONLY by index.php (after typography.css and home-polish.css), with home-motion.js.
   Source: the accepted design-previews/homepage-neon-motion Revision 3, prefix renamed pm- -> hm- (Menu keeps its own .pm-* names).
   Progressive enhancement: nothing is hidden in base CSS. html.hm-on (set by a tiny inline script in index.php only when the visitor
   has not asked for reduced motion) gates every hidden "from" state; with JS off or prefers-reduced-motion the page is the static
   homepage. Section 5b (gallery 6 tiles, reviews 4 cards, equal CTA boxes) and 5d (mobile hero stack) are layout, not motion, so they
   are not gated. Social-icon styling is shared by the header and footer of every public page and lives in global.css. */

/* =============================================================================================================
   1. HERO  - ambient light, typography arrival, metallic reflection, supporting copy, CTAs
   ============================================================================================================= */

/* 1a. environmental light: lives on the photograph's own layer (below the text-protection overlay), centred on the actual
   strike-ball and its lane reflection. hero-motion.js measures where the ball sits for the current crop (--hm-bx/by/br). */
/* ---- handwritten red-neon greeting (hm-sg-*): pen-drawn once, ignites, settles. Desktop / phone profiles. ----
   Sequence (desktop): greeting writes 140-1500 ms, ignites 1550-1800 ms (only the greeting is at peak), headline lines 1000/1100 ms,
   silver / crimson headline reflections 1700/1800 ms, ruby diamond swipe peaks about 2000 ms, calm by about 2.5 s. Phones: written 1.3 s,
   ignition 1.34-1.58 s, diamonds peak 1.75 s, calm by about 2.3 s. */
:root {
  --hm-sg-fs: clamp(34px, 2.9vw, 52px);    /* font-size equivalent of the sign (SVG user units are 1/1000 em) */
  --hm-sg-start: 140ms;
  --hm-sg-glyph: 360ms;                    /* every letter is pen-drawn for this long (matches tools/make-signature-svg.py) */
  --hm-sg-ignite: 250ms;
  --hm-sg-ignite-at: 1550ms;               /* greeting ignition starts once the last letter has landed */
  --hm-sg-total: 1900ms;                   /* read by home-motion.js */
}
@media (max-width: 768px) {
  :root {
    --hm-sg-start: 110ms;
    --hm-sg-glyph: 300ms;
    --hm-sg-ignite: 240ms;
    --hm-sg-ignite-at: 1340ms;
    --hm-sg-total: 1700ms;
  }
}

/* 1a. environmental light: lives on the photograph's own layer (below the text-protection overlay), centred on the actual
   strike-ball and its lane reflection. hero-motion.js measures where the ball sits for the current crop (--hm-bx/by/br). */
/* ---- handwritten neon greeting (hm-sg-*): pen-drawn once, ignites, settles. Desktop / mobile profiles. ---- */
:root {
  --hm-sg-fs: clamp(40px, 3.3vw, 58px);   /* font-size equivalent of the sign (SVG user units are 1/1000 em) */
  --hm-sg-start: 100ms;
  --hm-sg-glyph: 340ms;
  --hm-sg-flourish: 120ms;                 /* flourish starts this long before the last letter ends */
  --hm-sg-write: 1280ms;                   /* first to last letter start (matches tools/make-signature-svg.py) */
  --hm-sg-ignite: 230ms;
  --hm-sg-total: 1950ms;                   /* start + write + glyph + flourish + ignite, read by home-motion.js */
}
@media (max-width: 768px) {
  :root {
    --hm-sg-fs: clamp(30px, 8.6vw, 44px);
    --hm-sg-start: 60ms;
    --hm-sg-glyph: 300ms;
    --hm-sg-write: 1000ms;
    --hm-sg-ignite: 200ms;
    --hm-sg-total: 1560ms;
  }
}

html.hm-on .hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--hm-bx, 66%) var(--hm-by, 66%), rgba(255, 74, 86, calc(0.36 * var(--hm-glow))) 0, rgba(255, 52, 66, calc(0.16 * var(--hm-glow))) calc(var(--hm-br, 190px) * 0.62), transparent var(--hm-br, 190px)),
    radial-gradient(ellipse calc(var(--hm-br, 190px) * 1.9) calc(var(--hm-br, 190px) * 0.42) at var(--hm-bx, 66%) calc(var(--hm-by, 66%) + var(--hm-br, 190px) * 1.15), rgba(255, 44, 58, calc(0.3 * var(--hm-glow))), transparent 72%);
}

html.hm-on .hero.hm-hero-run .hero__visual::after {
  animation: hm-ambient var(--hm-h-ambient) var(--hm-ease-light) var(--hm-h-ambient-delay) both;
}

html.hm-on .hero.hm-hero-settled .hero__visual::after,
html.hm-on .hero.hm-hero-static .hero__visual::after {
  opacity: var(--hm-ambient-rest);
}

@keyframes hm-ambient {
  0% { opacity: 0; }
  55% { opacity: 1; }
  100% { opacity: var(--hm-ambient-rest); }
}

/* a single, slow photographic settle (desktop only; the mobile profile starts at scale 1) */
html.hm-on .hero.hm-hero-run .hero__cover {
  animation: hm-settle var(--hm-h-settle) var(--hm-ease) both;
  will-change: transform;
}

@keyframes hm-settle {
  from { transform: scale(var(--hm-hero-scale-from)); }
  to { transform: scale(1); }
}

/* 1b. typography arrival: existing containers only (no text is regenerated or split) */
html.hm-on .hero:not(.hm-hero-run):not(.hm-hero-static):not(.hm-hero-settled) :is(.hero__eyebrow, .hero__title-line, .hero__description, .hero__actions) {
  opacity: 0;
}

@keyframes hm-up {
  from { opacity: 0; transform: translateY(var(--hm-dy)); }
  to { opacity: 1; transform: none; }
}

@keyframes hm-line-in {
  from { opacity: 0; transform: translateY(calc(var(--hm-dy) * 1.25)); }
  to { opacity: 1; transform: none; }
}

html.hm-on .hero.hm-hero-run .hero__eyebrow { animation: hm-up var(--hm-h-eyebrow) var(--hm-ease) var(--hm-h-eyebrow-delay) both; }
html.hm-on .hero.hm-hero-run .hero__title-line--silver { animation: hm-line-in var(--hm-h-line) var(--hm-ease) var(--hm-h-line1-delay) both; }
html.hm-on .hero.hm-hero-run .hero__title-line--crimson { animation: hm-line-in var(--hm-h-line) var(--hm-ease) var(--hm-h-line2-delay) both; }
html.hm-on .hero.hm-hero-run .hero__description { animation: hm-up var(--hm-h-desc) var(--hm-ease) var(--hm-h-desc-delay) both; }
html.hm-on .hero.hm-hero-run .hero__actions { animation: hm-up var(--hm-h-actions) var(--hm-ease) var(--hm-h-actions-delay) both; }

/* 1c. metallic reflection: a narrow beam travelling over the lettering itself.
   The beam is an extra background layer clipped to the glyphs of the existing text node (no duplicated text, no pseudo-element
   text, nothing for a screen reader to read twice). Lines shrink to their text width so the beam only travels over letters.
   On the white line the beam is the red of the room reflected in the letters (a white beam would be invisible on white).
   The silver line is repainted as a flat #fff background-clip layer (visually the same white) and its text-shadow becomes the
   equivalent drop-shadow, because a text-shadow would darken background-clipped glyphs. */
html.hm-on .hero__title-line {
  width: fit-content;
  max-width: 100%;
}

html.hm-on .hero__title-line--silver {
  --hm-a: var(--hm-sweep-alpha-silver);
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.7));
  background-image:
    linear-gradient(104deg, transparent 46.2%, rgba(255, 60, 52, calc(var(--hm-a) * 0.34)) 48.2%, rgba(255, 50, 40, var(--hm-a)) 49.7%, rgba(255, 50, 40, var(--hm-a)) 50.3%, rgba(255, 60, 52, calc(var(--hm-a) * 0.34)) 51.8%, transparent 53.8%),
    linear-gradient(#fff, #fff);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 80% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
}

html.hm-on .hero__title-line--crimson {
  --hm-a: var(--hm-sweep-alpha-crimson);
  background-image:
    linear-gradient(104deg, transparent 46.2%, rgba(255, 214, 220, calc(var(--hm-a) * 0.32)) 48.2%, rgba(255, 240, 242, var(--hm-a)) 49.7%, rgba(255, 240, 242, var(--hm-a)) 50.3%, rgba(255, 214, 220, calc(var(--hm-a) * 0.32)) 51.8%, transparent 53.8%),
    linear-gradient(180deg, #ff8a90 0%, #ff3140 26%, #e21828 58%, #9b101c 100%);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 80% 0, 0 0;
}

html.hm-on .hero.hm-hero-run .hero__title-line--silver {
  animation: hm-line-in var(--hm-h-line) var(--hm-ease) var(--hm-h-line1-delay) both,
             hm-sweep var(--hm-h-sweep) var(--hm-ease-light) var(--hm-h-sweep1-delay) both;
}

html.hm-on .hero.hm-hero-run .hero__title-line--crimson {
  animation: hm-line-in var(--hm-h-line) var(--hm-ease) var(--hm-h-line2-delay) both,
             hm-sweep var(--hm-h-sweep) var(--hm-ease-light) var(--hm-h-sweep2-delay) both;
}

@keyframes hm-sweep {
  from { background-position: 80% 0, 0 0; }
  to { background-position: 20% 0, 0 0; }
}

/* 1d. calls to action: one coordinated group (the .hero__actions fade above) plus one short light on the primary button */
html.hm-on .hero-cta::before,
html.hm-on .hero-cta--primary::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

/* specular line that slides across a button on hover / keyboard focus (paint-only, small area) */
html.hm-on .hero-cta::before {
  inset: 0;
  background: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, 0.26) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 120% 0;
}

html.hm-on .hero-cta--secondary::before,
html.hm-on .hero-cta--outline::before {
  background-image: linear-gradient(104deg, transparent 38%, rgba(255, 255, 255, 0.14) 50%, transparent 62%);
}

html.hm-on .hero-cta--primary::after {
  inset: -1px;
  opacity: 0;
  box-shadow: 0 0 calc(22px * var(--hm-glow)) 1px rgba(255, 64, 78, 0.62), inset 0 0 12px rgba(255, 255, 255, 0.16);
}

html.hm-on .hero.hm-hero-run .hero-cta--primary::after {
  animation: hm-cta-glow var(--hm-h-cta-glow) var(--hm-ease-light) var(--hm-h-cta-glow-delay) both;
}

@keyframes hm-cta-glow {
  0% { opacity: 0; }
  45% { opacity: 1; }
  100% { opacity: 0; }
}

html.hm-on .hero-cta { transition: transform var(--hm-t-hover) var(--hm-ease), box-shadow var(--hm-t-hover) var(--hm-ease), border-color var(--hm-t-hover) var(--hm-ease), background var(--hm-t-hover) var(--hm-ease); }
html.hm-on .hero-cta svg,
html.hm-on .hero-cta__arrow { transition: transform var(--hm-t-hover) var(--hm-ease); }

@media (hover: hover) {
  html.hm-on .hero-cta:hover { border-color: rgba(255, 200, 205, 0.95); }
  html.hm-on .hero-cta:hover::before { background-position: -20% 0; transition: background-position 760ms var(--hm-ease-light); }
  html.hm-on .hero-cta:hover .hero-cta__arrow { transform: translateX(3px); }
}

/* keyboard focus is at least as strong as hover: inset ring from the real stylesheet + a controlled red halo + the same light line */
html.hm-on .hero-cta:focus-visible {
  border-color: rgba(255, 225, 229, 0.98);
  box-shadow: 0 0 0 2px rgba(255, 225, 229, 0.9), 0 0 calc(18px * var(--hm-glow)) rgba(255, 64, 78, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
html.hm-on .hero-cta:focus-visible::before { background-position: -20% 0; transition: background-position 760ms var(--hm-ease-light); }
html.hm-on .hero-cta:focus-visible .hero-cta__arrow { transform: translateX(3px); }

/* touch: a short press response instead of hover */
@media (hover: none) {
  html.hm-on .hero-cta:active { transform: scale(0.985); transition-duration: var(--hm-t-fast); }
}

/* =============================================================================================================
   2. NAVIGATION  - underline draws in and out like a light bar; geometry, logo and active state untouched
   ============================================================================================================= */
html.hm-on .site-nav-links a::after {
  transform-origin: right center;
  transition: transform var(--hm-t-hover) var(--hm-ease);
  box-shadow: 0 0 calc(8px * var(--hm-glow)) rgba(226, 24, 40, 0.75);
}

html.hm-on .site-nav-links a:hover::after,
html.hm-on .site-nav-links a:focus-visible::after,
html.hm-on .site-nav-links a.is-active::after {
  transform-origin: left center;
}

/* =============================================================================================================
   3. DESTINATION CARDS  - one coherent reveal, photographic depth, controlled edge light
   ============================================================================================================= */

/* the real page plays its own 0.5 s entrance (home.css "dest-in"); the prototype replaces it with the scroll-triggered one */
html.hm-on .dest-card { animation: none; }
/* switching Motion off after load must not replay the real page's own load animation */
html.hm-ready:not(.hm-on) .dest-card { animation: none; }

html.hm-on .dest-card.hm-reveal:not(.hm-in) {
  opacity: 0;
  transform: translateY(var(--hm-dy));
}

html.hm-on .dest-card.hm-reveal {
  transition: opacity var(--hm-t-reveal) var(--hm-ease) var(--hm-delay, 0ms), transform var(--hm-t-reveal) var(--hm-ease) var(--hm-delay, 0ms);
}

/* resting state: same crops, copy and sizes; slightly more controlled contrast and a quieter, deeper edge */
html.hm-on .destination-card__image { filter: contrast(1.05) saturate(1.04); }

html.hm-on .dest-card__hit {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42), 0 0 calc(10px * var(--hm-glow)) rgba(226, 24, 40, 0.14), inset 0 1px rgba(255, 255, 255, 0.07);
  transition: transform var(--hm-t-hover) var(--hm-ease), box-shadow var(--hm-t-hover) var(--hm-ease), border-color var(--hm-t-hover) var(--hm-ease);
}

/* inner top-edge light + a faint red bloom at the top (permanent, very quiet) */
html.hm-on .dest-card__hit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 128, 138, 0.2), transparent 3px),
    radial-gradient(110% 55% at 50% 0%, rgba(255, 70, 86, 0.1), transparent 62%);
}

/* hover-only light that crosses the photograph once, left to right */
html.hm-on .dest-card__hit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 40%, rgba(175, 0, 20, 0.07) 46%, rgba(255, 0, 31, 0.15) 50%, rgba(175, 0, 20, 0.05) 54%, transparent 60%) no-repeat;
  background-size: 280% 100%;
  background-position: 135% 0;
  transition: none;
}

html.hm-on .destination-card__image { transition: transform 520ms var(--hm-ease); }
html.hm-on .dest-card__orb svg { transition: transform var(--hm-t-hover) var(--hm-ease); }

@media (hover: hover) and (min-width: 769px) {
  html.hm-on .dest-card__hit:hover { transform: translateY(calc(var(--hm-card-lift) * -1)); }
  html.hm-on .dest-card__hit:hover .destination-card__image { transform: scale(var(--hm-card-scale)); }
}

@media (hover: hover) {
  html.hm-on .dest-card__hit:hover {
    border-color: rgba(255, 112, 124, 0.92);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5), 0 0 calc(18px * var(--hm-glow)) rgba(226, 24, 40, 0.24), inset 0 1px rgba(255, 255, 255, 0.12);
  }
  html.hm-on .dest-card__hit:hover::after { background-position: -35% 0; transition: background-position 900ms var(--hm-ease-light); }
  html.hm-on .dest-card__hit:hover .dest-card__orb svg { transform: translateX(3px); }
}

/* keyboard focus = the same premium state (all widths) */
html.hm-on .dest-card__hit:focus-visible {
  transform: translateY(calc(var(--hm-card-lift) * -1));
  border-color: rgba(255, 225, 229, 0.95);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5), 0 0 calc(20px * var(--hm-glow)) rgba(255, 64, 78, 0.34), inset 0 1px rgba(255, 255, 255, 0.14);
}
html.hm-on .dest-card__hit:focus-visible .destination-card__image { transform: scale(var(--hm-card-scale)); }
html.hm-on .dest-card__hit:focus-visible::after { background-position: -35% 0; transition: background-position 900ms var(--hm-ease-light); }
html.hm-on .dest-card__hit:focus-visible .dest-card__orb svg { transform: translateX(3px); }

/* touch / mobile: no hover, no tilt, no tracking - a short press only, card height never changes */
@media (hover: none), (max-width: 768px) {
  html.hm-on .dest-card__hit:hover { transform: none; }
  html.hm-on .dest-card__hit:active { transform: scale(0.988); transition-duration: var(--hm-t-fast); }
  html.hm-on .dest-card__hit:hover .destination-card__image { transform: none; }
  html.hm-on .dest-card__hit:focus-visible .destination-card__image { transform: none; }
}

/* =============================================================================================================
   5. SECTIONS  - restrained entrances (opacity + 8-12 px), once only
   ============================================================================================================= */
html.hm-on .hm-reveal:not(.dest-card):not(.hm-in) {
  opacity: 0;
  transform: translateY(var(--hm-dy));
}
html.hm-on .hm-reveal--fade:not(.hm-in) { transform: none; }
html.hm-on .hm-reveal:not(.dest-card) {
  transition: opacity var(--hm-t-reveal) var(--hm-ease) var(--hm-delay, 0ms), transform var(--hm-t-reveal) var(--hm-ease) var(--hm-delay, 0ms);
}

/* events cards: only a small edge response; the cards themselves keep their real structure and hover */
html.hm-on .event-card__hit { transition: border-color var(--hm-t-hover) var(--hm-ease), box-shadow var(--hm-t-hover) var(--hm-ease), transform var(--hm-t-hover) var(--hm-ease); }

/* inquiry fields: refined crimson border and a controlled glow; no dimension change (border width is constant) */
html.hm-on .inquiry-form__control { transition: border-color var(--hm-t-hover) var(--hm-ease), box-shadow var(--hm-t-hover) var(--hm-ease), background-color var(--hm-t-hover) var(--hm-ease); }
html.hm-on .inquiry-form__control:focus,
html.hm-on .inquiry-form__control:focus-visible {
  border-color: rgba(255, 91, 108, 0.92);
  background-color: #110a0e;
  box-shadow: 0 0 0 3px rgba(255, 91, 108, 0.12), 0 0 calc(14px * var(--hm-glow)) rgba(226, 24, 40, 0.2);
}

/* footer: one divider light that draws across when the footer arrives */
html.hm-on .site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 104, 0.85) 30%, rgba(255, 90, 104, 0.85) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.85;
}
html.hm-on .site-footer.hm-in::before { transform: scaleX(1); transition: transform 900ms var(--hm-ease); }

/* =============================================================================================================
   5b. DESIGN REVISIONS (layout / sizing - not motion, so not gated by html.hm-on; the prototype shows them with motion off too)
   ============================================================================================================= */

/* --- gallery: exactly 6 equal tiles at destination-card weight (the PHP still renders 8; the prototype hides 7 and 8) --- */
.home-gallery__thumb:nth-child(n + 7) { display: none; }

.home-gallery__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
}

.home-gallery__thumb {
  height: clamp(205px, 15.3vw, 225px);   /* the same expression as .dest-card */
  border-radius: 16px;
  border-color: var(--home-polish-edge, rgba(255, 91, 108, 0.34));
  box-shadow: var(--home-polish-shadow, 0 12px 28px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.06));
}

@media (hover: hover) {
  .home-gallery__thumb:hover {
    border-color: rgba(255, 118, 129, 0.86);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.46), 0 0 16px rgba(226, 24, 40, 0.17), inset 0 1px rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 1100px) {
  .home-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .home-gallery__thumb { height: clamp(230px, 24.5vw, 260px); }   /* dest-card height at this width */
}

@media (max-width: 768px) {
  .home-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-gallery__thumb { height: clamp(168px, 46vw, 200px); border-radius: 14px; }
}

/* --- reviews: four smaller cards on desktop (2 / 1 below, from the real breakpoints), so the block stops dominating the page --- */
@media (min-width: 1200px) {
  .home-reviews {
    --reviews-css-vis: 4;
    --reviews-vis: 4;
    --reviews-gap: 14px;
  }
}

.home-reviews { padding-top: 20px; padding-bottom: 14px; }
.home-reviews__head { margin-bottom: 14px; }
.home-reviews__stage { row-gap: 10px; }

.home-review__panel {
  min-height: 170px;
  padding: 12px 15px 12px;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 10px;
}

.home-review__avatar { width: 36px; height: 36px; font-size: 0.64rem; }
.home-review__meta { min-height: 36px; }

.home-review__quote {
  margin: 8px 0 0;
  font-size: 0.9rem;
  line-height: 1.42;
  font-weight: 500;
}

.home-review__name { margin: 8px 0 0; font-size: 0.9rem; }

@media (min-width: 768px) {
  .home-review__quote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }
}

@media (min-width: 1200px) {
  .home-review__quote { -webkit-line-clamp: 4; line-clamp: 4; }
}

/* --- destination-card buttons: one shared box (width of the longest label, "Прикачи & Испечати") and one height --- */
.dest-card__cta {
  box-sizing: border-box;
  width: min(206px, 100%);
  height: 44px;
  min-height: 44px;
  padding: 0 0.8rem;
  text-align: center;
  line-height: 1.12;
  white-space: normal;       /* a long label wraps to two lines inside the same box, the box never grows */
}

/* =============================================================================================================
   5c. HERO DIAMOND GLINTS  - sharp red crystal flashes on the real shards, left to right, once. No blobs, no white, no photo dimming.
   .hm-glints covers the photograph (desktop: the whole hero; phones: the photo band). Each .hm-gl is a CSS light (no drawn symbol) positioned from the
   measured ball centre / radius; hidden at rest (opacity 0) so with no JS or reduced motion nothing is ever shown.
   ============================================================================================================= */
.hm-glints {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hm-gl {
  --hm-gl-size: max(calc(18px * var(--s)), calc(var(--hm-br, 190px) * 0.34 * var(--s)));
  position: absolute;
  left: calc(var(--hm-bx, 66%) + var(--x) * var(--hm-br, 190px) - var(--hm-gl-size) / 2);
  top: calc(var(--hm-by, 66%) + var(--y) * var(--hm-br, 190px) - var(--hm-gl-size) / 2);
  width: var(--hm-gl-size);
  height: var(--hm-gl-size);
  opacity: 0;
  transform: rotate(var(--a)) scale(0.6);
  /* light, not a drawn symbol: a deep-red halo stretched along the fragment, one short sharp crimson ray and a tiny saturated ruby hotspot.
     No white or pink, no outline. Screen-blended so the photograph's own dark glass carries the light. */
  background:
    radial-gradient(circle at 50% 50%, #ff1428 0, #e0101f 38%, rgba(190, 8, 24, 0) 100%) 50% 50% / 19% 19% no-repeat,
    linear-gradient(90deg, rgba(255, 36, 56, 0) 0, #ff2438 46%, #ff2438 54%, rgba(255, 36, 56, 0) 100%) 50% 50% / 88% 2.5px no-repeat,
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(204, 10, 30, 0.68) 0, rgba(160, 6, 22, 0.36) 52%, rgba(120, 0, 14, 0) 100%) 50% 50% / 100% 62% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform, opacity;
}

html.hm-on .hero.hm-hero-run .hm-gl {
  animation: hm-gl-flash var(--d) cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--hm-gl-start) + var(--t)) both;
}

@keyframes hm-gl-flash {
  0%   { opacity: 0; transform: rotate(var(--a)) scale(0.6); }
  30%  { opacity: 1; transform: rotate(var(--a)) scale(1); }
  62%  { opacity: 0.8; transform: rotate(var(--a)) scale(0.96); }
  100% { opacity: 0; transform: rotate(var(--a)) scale(0.85); }
}

/* =============================================================================================================
   5d. MOBILE HERO STACK (<= 768 px)  - the real phone layout is a column: photo band on top, text block below on #050304.
   The real CSS pulls the text up over the photo's dark bottom fade (.hero__layout margin-top: -48px). Wrapped Macedonian
   kicker lines (and anything taller than the fade) then land on the bright ball and shards. Here the text block starts below the
   photograph. Layout corrections are NOT gated by html.hm-on, so Motion off, reduced motion and no-JS get the same clean stack.
   ============================================================================================================= */
@media (max-width: 768px) {
  .hero {
    --hm-band: clamp(230px, 58vw, 320px);                 /* the photograph (same clamp() as .hero__visual) */
    --hm-sg-fs-en: clamp(36px, 10.6vw, 52px);              /* Sacramento: phrase about 70 % of a 360 px phone */
    --hm-sg-band: calc(var(--hm-sg-fs-en) * 0.85 + 26px);  /* slim black signature band under the photograph */
  }

  .hero__layout {
    margin-top: 0;
    padding-top: var(--hm-sg-band);
  }

  /* the photograph stays at natural brightness: no 52 % dark fade, no ambient layer, no overlay. Only a short (10 % of the photo height)
     soft end into the black content surface, well below the ball and its logo. */
  .hero__visual::after,
  html.hm-on .hero__visual::after,
  html.hm-on .hero.hm-hero-run .hero__visual::after,
  html.hm-on .hero.hm-hero-settled .hero__visual::after,
  html.hm-on .hero.hm-hero-static .hero__visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 10%;
    opacity: 1;
    animation: none;
    background: linear-gradient(180deg, transparent 0%, #050304 100%);
  }

  /* glints are confined to the photo band */
  .hm-glints {
    bottom: auto;
    height: var(--hm-band);
  }
}

/* Desktop: keep the text-protection gradient on the left but let the ball, its logo and the pins show at (almost) natural brightness
   (the original gradient reached the ball and darkened the lower half by about 20 %). */
@media (min-width: 1025px) {
  .hero__overlay {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.86) 24%, rgba(5, 1, 2, 0.58) 37%, rgba(5, 1, 2, 0.14) 48%, transparent 58%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, transparent 24%, transparent 68%, rgba(0, 0, 0, 0.42) 100%);
  }
}

/* =============================================================================================================
   6. MOTION OFF / REDUCED MOTION  - handled by absence: html.hm-on is never set (OS preference or the reviewer switch),
   so every rule above is inert. Static premium styling that does not move (focus rings from the real stylesheet) remains.
   The block below only covers the case where the OS preference changes after load.
   ============================================================================================================= */
@media (prefers-reduced-motion: reduce) {
  html.hm-on *, html.hm-on *::before, html.hm-on *::after { animation: none !important; transition: none !important; }
  html.hm-on .hm-reveal, html.hm-on .hero :is(.hero__eyebrow, .hero__title-line, .hero__description, .hero__actions) { opacity: 1 !important; transform: none !important; }
}

/* Inter has no 800 face (self-hosted 400-700): initials in the review avatars use the real 700 face. */
.home-reviews__face,
.home-review__avatar { font-weight: 700; }

/* =============================================================================================================
   5e. HANDWRITTEN RED-NEON GREETING  ("Welcome to Tino's" in Sacramento / "Добредојде во Tino's" in Caveat, SIL OFL; outlines baked into
   inline SVG by tools/make-signature-svg.py; no font file is requested at run time).
   Static default = the finished sign (no JS, reduced motion). With html.hm-on the sign is pen-drawn once during the hero run: a per-glyph mask
   stroke (stroke-dashoffset along each outline, letters in reading order) reveals the saturated-red tube and its tight crimson halo, then the
   soft outer / ambient glow switches on with one short ignition and everything settles. Palette (no white, no pink): hot core #ff3a24, tube
   #ff001f, tight halo #d90018 at .5, outer glow #af0014 at .3, ambient #6e000c at .28.
   Placement: desktop / landscape = above the eyebrow, aligned to the copy's left edge (top measured by home-motion.js from the real eyebrow);
   <= 768 px = one line riding a gentle rising arc above the pins, defined in photograph coordinates so it follows the real crop.
   ============================================================================================================= */
.hm-sign {
  position: absolute;
  z-index: 2;
  top: var(--hm-sign-top, 14%);
  left: calc((100% - min(100% - 40px, var(--max-width, 1440px))) / 2 - 170 * var(--hm-sg-fs) / 1000);
  margin: 0;
  pointer-events: none;
  line-height: 0;
  transform: scale(var(--hm-sign-fit, 1));
  transform-origin: left top;
}

.hm-sign__svg {
  display: none;
  overflow: visible;
  width: calc(var(--hm-vbw) * var(--hm-sg-fs) / 1000);
  height: calc(var(--hm-vbh) * var(--hm-sg-fs) / 1000);
}
.hm-sign__svg--en.hm-sign__svg--d { --hm-vbw: 6979; --hm-vbh: 1432; }
.hm-sign__svg--en.hm-sign__svg--b { --hm-vbw: 6979; --hm-vbh: 1189; }
.hm-sign__svg--mk.hm-sign__svg--d { --hm-vbw: 7208; --hm-vbh: 1564; }
.hm-sign__svg--mk.hm-sign__svg--b { --hm-vbw: 7208; --hm-vbh: 1303; }
html:not([lang="mk"]) .hm-sign__svg--en.hm-sign__svg--d { display: block; }
html[lang="mk"] .hm-sign__svg--mk.hm-sign__svg--d { display: block; }

/* red neon layers (finished state). The glow layers use group-level opacity so overlapping letters never double up. */
.hm-sg__ambient { --o: 0.28; opacity: var(--o); fill: #6e000c; stroke: #6e000c; stroke-width: 330px; stroke-linejoin: round; }
.hm-sg__outer { --o: 0.3; opacity: var(--o); fill: #af0014; stroke: #af0014; stroke-width: 190px; stroke-linejoin: round; }
.hm-sg__halo { --o: 0.5; opacity: var(--o); fill: #d90018; stroke: #d90018; stroke-width: 96px; stroke-linejoin: round; }
.hm-sg__tube { fill: #ff3a24; stroke: #ff001f; stroke-width: 46px; stroke-linejoin: round; paint-order: stroke fill; }
.hm-sg__pen { fill: none; stroke: #fff; stroke-width: 200px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* before the run: nothing drawn, glow off (only with motion allowed; the page is complete without it) */
html.hm-on .hero:not(.hm-hero-run):not(.hm-hero-settled):not(.hm-hero-static) .hm-sg__pen { stroke-dashoffset: 1; }
html.hm-on .hero:not(.hm-hero-run):not(.hm-hero-settled):not(.hm-hero-static) :is(.hm-sg__ambient, .hm-sg__outer) { opacity: 0; }

html.hm-on .hero.hm-hero-run .hm-sg__pen {
  animation: hm-sg-draw var(--hm-sg-glyph) cubic-bezier(0.4, 0.1, 0.3, 1) calc(var(--hm-sg-start) + var(--d, 0ms)) both;
}

/* ignition: the soft glow switches on with one short overshoot (about 1.5x) and settles; the tight halo breathes once */
html.hm-on .hero.hm-hero-run :is(.hm-sg__ambient, .hm-sg__outer) {
  animation: hm-sg-on var(--hm-sg-ignite) ease-out var(--hm-sg-ignite-at) both;
}
html.hm-on .hero.hm-hero-run .hm-sg__halo {
  animation: hm-sg-ignite var(--hm-sg-ignite) ease-out var(--hm-sg-ignite-at) both;
}

@keyframes hm-sg-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes hm-sg-on {
  0% { opacity: 0; }
  45% { opacity: calc(var(--o) * 1.5); }
  100% { opacity: var(--o); }
}

@keyframes hm-sg-ignite {
  0% { opacity: var(--o); }
  45% { opacity: calc(var(--o) * 1.35); }
  100% { opacity: var(--o); }
}

/* phones / tablet: the greeting lives in a slim black band between the photograph and the eyebrow (never over the photo). Left edge = the hero
   text edge (24 px). Sacramento at --hm-sg-fs-en, Caveat 12 % smaller so both phrases read equally prominent; both fit one line at 360 px
   (EN about 70 % and MK about 64 % of the phone width). The band height is reserved by .hero__layout padding, so nothing shifts. */
@media (max-width: 768px) {
  .hm-sign {
    --hm-sg-fs: var(--hm-sg-fs-en);
    --hm-sg-pad: 170;
    left: calc(24px - var(--hm-sg-pad) * var(--hm-sg-fs) / 1000);
    top: calc(var(--hm-band) + 13px - var(--hm-sg-pad) * var(--hm-sg-fs) / 1000);
    transform: none;
  }
  html[lang="mk"] .hm-sign { --hm-sg-fs: calc(var(--hm-sg-fs-en) * 0.88); }
  html:not([lang="mk"]) .hm-sign__svg--en.hm-sign__svg--d,
  html[lang="mk"] .hm-sign__svg--mk.hm-sign__svg--d { display: none; }
  html:not([lang="mk"]) .hm-sign__svg--en.hm-sign__svg--b { display: block; }
  html[lang="mk"] .hm-sign__svg--mk.hm-sign__svg--b { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-sign * { animation: none; }
}

/* Logo clarity: the Tino's lettering on the ball must read crisply. The photograph gets a gentle, static lift in brightness and contrast
   (CSS only, the file is untouched) and the red ambient wash over the ball stays very light. */
.hero__cover { filter: brightness(1.12) contrast(1.12) saturate(1.04); }