/* Optional visual layer. Load after site.css, blocks.css, horses.css and admin.css. */
:root {
  --f3d-glass: color-mix(in srgb, var(--surface) 78%, transparent);
  --f3d-edge: color-mix(in srgb, var(--accent) 42%, var(--line));
  --f3d-glint: color-mix(in srgb, var(--accent) 18%, transparent);
  --f3d-shadow: 0 22px 48px color-mix(in srgb, #000 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
}

/* Broad hero lighting and a floating glass plate; pseudo-elements never
   participate in layout or intercept editing controls. */
body:not(.is-editing) .hero {
  isolation: isolate;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 24%, transparent);
}

body:not(.is-editing) .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 86%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, #fff 6%, transparent), transparent 32%, color-mix(in srgb, #000 12%, transparent));
}

body:not(.is-editing) .hero-content {
  isolation: isolate;
  transform-style: preserve-3d;
  text-shadow: 0 2px 22px color-mix(in srgb, #000 36%, transparent);
}

body:not(.is-editing) .hero-content::before {
  content: '';
  position: absolute;
  inset: clamp(8px, 1.5vw, 22px) 10px;
  /* Keep the glass plate inside the transformed stacking context. A
     negative z-index can disappear when a nested button is hovered because
     the hero content then creates a new 3D stacking context. */
  z-index: 0;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 20px;
  background: linear-gradient(128deg, color-mix(in srgb, var(--f3d-glass) 78%, transparent), color-mix(in srgb, var(--surface) 24%, transparent));
  box-shadow: var(--f3d-shadow), inset 0 0 42px color-mix(in srgb, var(--accent) 6%, transparent);
}

body:not(.is-editing) .hero-content > * {
  position: relative;
  z-index: 1;
}

@supports (backdrop-filter: blur(12px)) {
  body:not(.is-editing) .hero-content::before { backdrop-filter: blur(12px) saturate(1.12); }
}

/* Shared translucent surfaces for real content cards and editorial callouts. */
body:not(.is-editing) .feature,
body:not(.is-editing) .horse-card,
body:not(.is-editing) .admin-tile,
body:not(.is-editing) .admin-page-card,
body:not(.is-editing) .admin-horse-card,
body:not(.is-editing) .admin-media-item,
body:not(.is-editing) .block-infobox aside {
  border-color: color-mix(in srgb, var(--f3d-edge) 65%, var(--line));
  box-shadow: 0 12px 28px color-mix(in srgb, #000 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

body:not(.is-editing) .feature {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-alt) 94%, #fff 6%), var(--surface-alt) 68%);
  transition: transform .34s cubic-bezier(.2, .75, .25, 1), box-shadow .34s ease, border-color .25s ease;
}

body:not(.is-editing) .horse-card {
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-alt) 96%, #fff 4%), var(--surface-alt) 72%);
  transition: transform .36s cubic-bezier(.2, .75, .25, 1), box-shadow .36s ease, border-color .25s ease;
}

body:not(.is-editing) .admin-tile {
  background: linear-gradient(145deg, color-mix(in srgb, var(--admin-panel) 92%, #fff 8%), var(--admin-panel) 72%);
  transition: transform .34s cubic-bezier(.2, .75, .25, 1), box-shadow .34s ease, border-color .25s ease;
}

body:not(.is-editing) .admin-page-card,
body:not(.is-editing) .admin-horse-card,
body:not(.is-editing) .admin-media-item {
  background-image: linear-gradient(140deg, color-mix(in srgb, #fff 5%, transparent), transparent 48%);
  transition: transform .34s cubic-bezier(.2, .75, .25, 1), box-shadow .34s ease, border-color .25s ease;
}

body:not(.is-editing) .block-infobox aside {
  background-image: linear-gradient(140deg, color-mix(in srgb, #fff 7%, transparent), transparent 56%);
  box-shadow: 0 18px 38px color-mix(in srgb, #000 16%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  transition: transform .34s cubic-bezier(.2, .75, .25, 1), box-shadow .34s ease;
}

/* Add motion only on desktop-class hover; transform/opacity keep layout stable. */
@media (hover: hover) and (pointer: fine) {
  body:not(.is-editing) .feature:hover,
  body:not(.is-editing) .horse-card:hover,
  body:not(.is-editing) .admin-tile:hover,
  body:not(.is-editing) .admin-page-card:hover,
  body:not(.is-editing) .admin-horse-card:hover,
  body:not(.is-editing) .admin-media-item:hover,
  body:not(.is-editing) .block-infobox aside:hover {
    box-shadow: var(--f3d-shadow);
  }
}

/* Glass navigation with restrained lift; focus remains defined by site.css. */
body:not(.is-editing) .site-header,
body:not(.is-editing) .admin-header {
  box-shadow: 0 10px 30px color-mix(in srgb, #000 14%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--accent) 17%, transparent);
}

body:not(.is-editing) .main-nav a,
body:not(.is-editing) .admin-nav-link {
  border-radius: 10px;
  transition: transform .22s ease, color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .22s ease;
}

body:not(.is-editing) .main-nav a[aria-current="page"],
body:not(.is-editing) .admin-nav-link[aria-current="page"],
body:not(.is-editing) .admin-nav-link.is-active {
  text-shadow: 0 0 16px var(--f3d-glint);
}

body:not(.is-editing) .main-nav a:hover,
body:not(.is-editing) .admin-nav-link:hover,
body:not(.is-editing) .nav-toggle:hover,
body:not(.is-editing) .admin-nav-toggle:hover,
body:not(.is-editing) .theme-switch:hover .theme-switch-track {
  box-shadow: 0 8px 20px color-mix(in srgb, #000 18%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}

/* Beveled controls, preserving hit targets, focus outline and existing colors. */
body:not(.is-editing) .btn,
body:not(.is-editing) .nav-toggle,
body:not(.is-editing) .admin-nav-toggle,
body:not(.is-editing) .theme-switch-track {
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 5px 14px color-mix(in srgb, #000 16%, transparent);
  transition: transform .22s ease, box-shadow .22s ease, background-color .25s, border-color .25s, color .25s;
}

body:not(.is-editing) .btn-primary { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent), 0 8px 22px color-mix(in srgb, var(--accent) 24%, transparent); }

body:not(.is-editing) .btn:active,
body:not(.is-editing) .nav-toggle:active,
body:not(.is-editing) .admin-nav-toggle:active { transform: translateY(1px); }

/* Editorial polish without changing section geometry. */
body:not(.is-editing) .section .accent-line,
body:not(.is-editing) .admin-main .accent-line {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 56%, transparent));
}

body:not(.is-editing) .block-text > .container > div {
  text-shadow: 0 1px 18px color-mix(in srgb, var(--accent) 5%, transparent);
}

/* JS adds this class only while a fine-pointer target is actively tilted. */
body:not(.is-editing) .f3d-tilting {
  position: relative;
  z-index: 2;
  will-change: transform;
  transform: perspective(900px) rotateX(var(--f3d-rx, 0deg)) rotateY(var(--f3d-ry, 0deg)) translate3d(0, var(--f3d-lift, 0px), 0);
  transition: transform .12s ease-out, box-shadow .28s ease, border-color .22s ease;
}

body:not(.is-editing) .hero-content.f3d-tilting { --f3d-lift: -2px; }
body:not(.is-editing) .feature.f3d-tilting,
body:not(.is-editing) .horse-card.f3d-tilting,
body:not(.is-editing) .admin-tile.f3d-tilting,
body:not(.is-editing) .admin-page-card.f3d-tilting,
body:not(.is-editing) .admin-horse-card.f3d-tilting,
body:not(.is-editing) .admin-media-item.f3d-tilting,
body:not(.is-editing) .block-infobox aside.f3d-tilting { --f3d-lift: -4px; }

body:not(.is-editing) .btn.f3d-tilting,
body:not(.is-editing) .main-nav a.f3d-tilting,
body:not(.is-editing) .admin-nav-link.f3d-tilting,
body:not(.is-editing) .nav-toggle.f3d-tilting,
body:not(.is-editing) .admin-nav-toggle.f3d-tilting { --f3d-lift: -2px; }

/* Reveal is opt-in from JS after IntersectionObserver support is confirmed. */
.f3d-reveal {
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .25, 1);
}

.f3d-reveal:not(.f3d-visible) {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

@media (prefers-reduced-motion: reduce) {
  .f3d-tilting,
  .f3d-reveal,
  .f3d-reveal:not(.f3d-visible) {
    will-change: auto;
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  body:not(.is-editing) .feature,
  body:not(.is-editing) .horse-card,
  body:not(.is-editing) .admin-tile,
  body:not(.is-editing) .admin-page-card,
  body:not(.is-editing) .admin-horse-card,
  body:not(.is-editing) .admin-media-item,
  body:not(.is-editing) .block-infobox aside,
  body:not(.is-editing) .main-nav a,
  body:not(.is-editing) .admin-nav-link,
  body:not(.is-editing) .btn,
  body:not(.is-editing) .nav-toggle,
  body:not(.is-editing) .admin-nav-toggle { transition: none !important; }
}

body.is-editing .f3d-tilting,
body.is-editing .f3d-reveal,
body.is-editing .f3d-reveal:not(.f3d-visible) {
  will-change: auto;
  opacity: 1;
  transform: none;
  transition: none !important;
}

@media (max-width: 640px) {
  /* No viewport-width transforms, parallax or horizontal overflow on touch. */
  body:not(.is-editing) .hero-content {
    width: auto;
    margin-inline: var(--space-3);
    padding-inline: var(--space-3);
  }
  body:not(.is-editing) .hero-content::before { inset-inline: 0; border-radius: 14px; }
  body:not(.is-editing) .feature,
  body:not(.is-editing) .horse-card,
  body:not(.is-editing) .admin-tile,
  body:not(.is-editing) .admin-page-card,
  body:not(.is-editing) .admin-horse-card,
  body:not(.is-editing) .admin-media-item { box-shadow: 0 8px 22px color-mix(in srgb, #000 16%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent); }
}