/* Owner: brochure page team. */
/*
 * Brochure pages: Forside (37), Karts (40), Mini/Loki/Odin/Heimdal (42–48), Brugte karts (50)
 * and their WPML translations. Loads site-wide, so every rule is scoped to element IDs that only
 * exist on these pages (#dino-hero, #dino-intro, #dino-parts-grid, #dino-contact-cta,
 * #dino-kart-*) or to section classes added by tools/page-build/content/content-build.php
 * (.dino-home-craft, .dino-hub-guarantee, .dino-views, .dino-other-models, .dino-used-*).
 *
 * Effects adopted from dino-kart.com: dark spotlight "stage" heroes with the radial vignette,
 * the brush-stroke section edge, card shadow/lift transitions (--dino-card-speed), the arrow nudge on hover
 * (prod translateX 15px), the overlay fade on gallery tiles and an entrance fade-up.
 * Motion only with prefers-reduced-motion: no-preference; hover motion only on hover devices.
 * Scroll reveals use CSS scroll-driven animations (no JS) and only translate, never hide;
 * browsers without support show the content statically.
 * Type sizes, card border/radius/shadow/lift, focus rings and tap targets come from the tokens in
 * site-design.css / ux.css; dark bands carry .dino-dark (set by the content build).
 */

:root {
  --dino-stage: url("../track.webp");
  --dino-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48 L0 29 L12 30 L20 29 L28 30 L36 33 L48 29 L68 31 L80 29 L100 29 L108 32 L116 30 L136 27 L148 27 L160 28 L172 29 L188 28 L200 26 L212 27 L220 28 L232 28 L252 30 L272 30 L292 30 L304 33 L316 30 L332 33 L348 35 L364 35 L372 33 L392 34 L408 35 L428 36 L436 37 L452 35 L468 36 L488 32 L496 36 L516 33 L524 29 L540 31 L560 27 L580 28 L596 23 L616 23 L624 23 L636 24 L648 23 L668 21 L688 20 L708 21 L724 24 L744 24 L760 24 L776 24 L796 26 L808 22 L820 23 L832 22 L844 23 L852 23 L868 25 L884 26 L892 23 L912 22 L932 19 L952 18 L960 22 L980 17 L996 18 L1004 15 L1016 16 L1032 16 L1040 17 L1060 14 L1076 18 L1092 16 L1100 18 L1120 17 L1136 17 L1144 20 L1160 20 L1172 21 L1184 24 L1200 22 L1208 25 L1224 28 L1232 27 L1248 27 L1260 27 L1272 29 L1288 30 L1300 31 L1320 30 L1332 28 L1352 28 L1360 31 L1376 28 L1388 29 L1404 27 L1420 29 L1440 25 L1440 48 Z'/%3E%3C/svg%3E");
  --dino-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 767px) {
  :root { --dino-stage: url("../track-800.webp"); }
}

/* ---------- 1. Stage heroes (karts hub, model pages, used karts, home) ---------- */

/* The stage photo is an <img class="dino-hero-backdrop" fetchpriority=high> inserted by the
   content build (LCP: found by the preload scanner); the vignette sits above it on ::before. */
#dino-kart-hero.dino-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 120px;
  background-color: var(--dino-ink, #080909);
  color: var(--dino-white, #fff);
}
#dino-kart-hero.dino-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 70% 40%, rgb(8 9 9 / 0%) 22%, rgb(8 9 9 / 92%) 78%),
    linear-gradient(90deg, rgb(8 9 9 / 70%), rgb(8 9 9 / 10%) 65%);
  pointer-events: none;
}
/* Brush-stroke edge into the next section (prod's wave-brush divider, drawn in CSS). */
:is(#dino-kart-hero.dino-section, #dino-hero)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: clamp(24px, 3.4vw, 48px);
  background: var(--dino-brush-next, var(--dino-white, #fff));
  -webkit-mask: var(--dino-brush) center bottom / 100% 100% no-repeat;
  mask: var(--dino-brush) center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
#dino-kart-hero:has(+ #dino-kart-specs) { --dino-brush-next: var(--dino-surface, #f3f4f4); }
/* Home: the backdrop is an <img fetchpriority=high> (LCP); the Bricks custom-CSS background
   (track.jpg) is switched off so it is never downloaded. */
body #dino-hero { position: relative; isolation: isolate; padding-bottom: 128px; background-image: none; }
:is(#dino-hero, #dino-kart-hero) > img.dino-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
#dino-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(8 9 9 / 90%), rgb(8 9 9 / 40%));
  pointer-events: none;
}

/* Light-on-dark text. Bricks prints element colours on #id selectors; these win by one type. */
#dino-kart-hero #dino-kart-title,
#dino-kart-hero h1 { color: var(--dino-white, #fff); }
#dino-kart-hero p { color: rgb(255 255 255 / 86%); }
#dino-kart-hero .dino-eyebrow { color: rgb(255 255 255 / 72%); }
#dino-kart-hero a.dino-card-link,
#dino-kart-hero #dino-kart-secondary { color: var(--dino-white, #fff); }
#dino-kart-hero a.dino-card-link:is(:hover, :focus-visible),
#dino-kart-hero #dino-kart-secondary:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-color: var(--dino-red, #c00);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Kart cut-outs float on the stage. */
#dino-kart-hero-image,
#dino-hero-kart {
  filter: drop-shadow(0 28px 22px rgb(0 0 0 / 55%));
}

@media (max-width: 767px) {
  #dino-kart-hero.dino-section { padding-bottom: 72px; }
  body #dino-hero { padding-bottom: 80px; }
}
/* Home hero on phones: long words in the translated H1 must not widen the grid track past the
   viewport (it pushed #dino-hero-kart 12–40px out at 360/390), and the kart's entrance slide
   (translate 56px) must not add horizontal scroll while it runs. */
body #dino-hero { overflow-x: clip; }
#dino-hero .dino-split > * { min-width: 0; }
#dino-hero-title { overflow-wrap: break-word; hyphens: auto; }

/* Home story band: prod's world-map texture ("til baner i hele verden"). */
section:has(#dino-story-title) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
section:has(#dino-story-title)::before {
  content: "";
  position: absolute;
  inset: 8% -4% 8% 38%;
  z-index: -1;
  background: url("../brochure/world.svg") center / contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

/* ---------- 2. Closing CTA as a stage panel ---------- */

:is(#dino-kart-cta, #dino-contact-cta) > .brxe-container {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 56px;
  border-radius: var(--dino-card-radius);
  background:
    linear-gradient(90deg, rgb(8 9 9 / 94%) 30%, rgb(8 9 9 / 55%)),
    var(--dino-stage) center 65% / cover no-repeat,
    var(--dino-ink, #080909);
  color: var(--dino-white, #fff);
  box-shadow: var(--dino-photo-shadow);
}
:is(#dino-kart-cta, #dino-contact-cta) :is(h2, h3) { color: var(--dino-white, #fff); }
:is(#dino-kart-cta, #dino-contact-cta) p { color: rgb(255 255 255 / 84%); }
:is(#dino-kart-cta, #dino-contact-cta) .dino-eyebrow { color: rgb(255 255 255 / 70%); }
:is(#dino-kart-cta, #dino-contact-cta) a.dino-card-link { color: var(--dino-white, #fff); }
:is(#dino-kart-cta, #dino-contact-cta) a.dino-card-link:is(:hover, :focus-visible) {
  text-decoration-color: var(--dino-red, #c00);
}
/* Used karts: sales contacts inside the panel. */
#dino-kart-cta .dino-sales-cards { margin-top: 16px; }
#dino-kart-cta .dino-sales-cards > .dino-card {
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 14%);
  backdrop-filter: blur(2px);
}
#dino-kart-cta .dino-sales-cards > .dino-card:hover { transform: none; box-shadow: none; border-color: rgb(255 255 255 / 32%); }
@media (max-width: 767px) {
  :is(#dino-kart-cta, #dino-contact-cta) > .brxe-container { padding: 32px 20px; border-radius: var(--dino-radius); }
}

/* ---------- 3. Model cards (home #dino-intro, hub #dino-kart-models, "other models") ---------- */

:is(#dino-intro, #dino-kart-models, .dino-model-cards) article {
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid transparent;
  background-image: radial-gradient(ellipse 80% 60% at 50% 28%, var(--dino-white, #fff) 0%, transparent 70%);
  transition: transform var(--dino-card-speed) var(--dino-ease-out), box-shadow var(--dino-card-speed) ease, border-color var(--dino-card-speed) ease;
}
#dino-intro article { padding-bottom: 24px; }
#dino-intro article > h3 { margin-top: -14px; } /* "DINO" kicker sits on the model name (global h3 margin is 30px) */
:is(#dino-intro, #dino-kart-models, .dino-model-cards) article img {
  transition: transform 0.45s var(--dino-ease-out), filter 0.3s ease;
  filter: drop-shadow(0 10px 8px rgb(8 9 9 / 18%));
}
/* Whole card is the link target (one link per card). */
:is(#dino-intro, #dino-kart-models, .dino-model-cards) article a::after,
#dino-parts-grid article a::after,
.dino-home-craft .dino-card a::after {
  content: "";
  position: absolute;
  inset: 0;
}
:is(#dino-intro, #dino-kart-models, .dino-model-cards, #dino-parts-grid) article a,
.dino-home-craft .dino-card a {
  display: inline-block;
  transition: transform var(--dino-card-speed) var(--dino-ease-out), color var(--dino-speed) ease;
}
#dino-parts-grid article,
.dino-home-craft .dino-card {
  position: relative;
  transition: transform var(--dino-card-speed) var(--dino-ease-out), box-shadow var(--dino-card-speed) ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(#dino-intro, #dino-kart-models, .dino-model-cards) article:hover {
    transform: var(--dino-card-lift);
    box-shadow: var(--dino-card-shadow-hover);
    border-bottom-color: var(--dino-red, #c00);
  }
  :is(#dino-intro, #dino-kart-models, .dino-model-cards) article:hover img {
    transform: translateY(-4px) scale(1.06) rotate(-1deg);
    filter: drop-shadow(0 18px 12px rgb(8 9 9 / 24%));
  }
  #dino-parts-grid article:hover,
  .dino-home-craft .dino-card:hover {
    transform: var(--dino-card-lift);
    box-shadow: var(--dino-card-shadow-hover);
  }
  :is(#dino-intro, #dino-kart-models, .dino-model-cards, #dino-parts-grid) article:hover a,
  .dino-home-craft .dino-card:hover a { transform: translateX(8px); }
}
:is(#dino-intro, #dino-kart-models, .dino-model-cards, #dino-parts-grid) article:focus-within,
.dino-home-craft .dino-card:focus-within {
  box-shadow: var(--dino-card-shadow-hover);
}

/* Phones: model cards become a swipeable scroll-snap row that bleeds to the screen edge
   (prod's model carousel, without JS). The next card peeks in to signal the swipe.
   Bricks gives the block width:100%, so the row is widened by both gutters explicitly;
   with width:auto it stopped 20px short of the right edge and the peek was cut off. */
@media (max-width: 767px) {
  #dino-intro .brxe-block:has(> article),
  #brx-content .dino-model-cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 72%);
    gap: 16px;
    width: calc(100% + 40px);
    max-width: none;
    margin-inline: -20px;
    padding: 4px 20px 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: thin;
  }
  #dino-intro .brxe-block:has(> article) { grid-template-columns: none; }
  :is(#dino-intro, .dino-model-cards) article { scroll-snap-align: start; }
}

/* ux.css gives .dino-card-link the --dino-tap hit area; take the extra height back here so
   the card layout does not move. */
:is(#dino-intro, #dino-kart-models, .dino-model-cards, #dino-parts-grid, .dino-home-craft,
  .dino-hub-guarantee, #dino-kart-cta, #dino-kart-hero) a.dino-card-link {
  margin-block: -10px;
}

/* ---------- 4. Model pages: key facts, views ---------- */

#dino-kart-spec-grid > div {
  position: relative;
  transition: transform var(--dino-card-speed) var(--dino-ease-out), box-shadow var(--dino-card-speed) ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #dino-kart-spec-grid > div:hover { transform: var(--dino-card-lift); box-shadow: var(--dino-card-shadow-hover); }
}
@media (max-width: 767px) {
  body #dino-kart-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #dino-kart-spec-grid > div { padding: 16px; }
  #dino-kart-spec-grid > div > p:not(.dino-label) { font-size: var(--dino-body); line-height: 1.35; hyphens: auto; overflow-wrap: anywhere; }
}

/* Kart views ("… fra flere vinkler"): cut-outs on a soft spotlight, zoom on hover. */
.dino-views .dino-view-img {
  border-radius: var(--dino-card-radius);
  background: radial-gradient(ellipse 70% 60% at 50% 55%, var(--dino-white, #fff) 0%, var(--dino-surface, #f3f4f4) 75%);
  transition: transform 0.5s var(--dino-ease-out);
}
.dino-views .dino-feature-group li {
  transition: var(--dino-transition);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dino-views .dino-view-img:hover { transform: scale(1.04); }
}
@media (hover: hover) {
  .dino-views .dino-feature-group li:hover { border-color: var(--dino-red, #c00); }
}

/* "Se også de andre modeller". */
.dino-model-cards article { gap: 10px; }
.dino-model-cards article img { width: 100%; }

/* ---------- 5. Photos (home craft, hub guarantee, used why) ---------- */

:is(.dino-home-craft, .dino-hub-guarantee, .dino-used-why) img.dino-photo {
  border-radius: var(--dino-card-radius);
  box-shadow: var(--dino-photo-shadow);
}
.dino-home-craft .dino-split { margin-bottom: 24px; }

/* ---------- 6. Used-karts gallery: overlay + zoom cue (prod lightbox tiles) ---------- */

.dino-gallery a.bricks-lightbox { position: relative; border-radius: var(--dino-card-radius); }
.dino-gallery a.bricks-lightbox::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23cc0000'/%3E%3Cpath d='M21 14a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm0-2a9 9 0 0 1 7.1 14.5l6.2 6.2-1.4 1.4-6.2-6.2A9 9 0 1 1 21 12zm-1 5h2v3h3v2h-3v3h-2v-3h-3v-2h3z' fill='%23fff'/%3E%3C/svg%3E") center / 48px no-repeat,
    linear-gradient(0deg, rgb(8 9 9 / 45%), rgb(8 9 9 / 10%));
  opacity: 0;
  transition: opacity var(--dino-card-speed) ease;
  pointer-events: none;
}
.dino-gallery a.bricks-lightbox:is(:hover, :focus-visible)::after { opacity: 1; }

/* ---------- 7. Card frames (tokens from site-design.css) ----------
   Cards on these pages share the global card border and radius. Red bars are deliberate
   accents: top on the parts/craft link cards, left on key facts and the "why used" cards. */

:is(#dino-intro, #dino-kart-models, #dino-parts-grid, .dino-home-craft, .dino-model-cards,
  .dino-used-why, .dino-spec-full, .dino-sales-cards) article,
#dino-kart-spec-grid > div {
  border: var(--dino-card-border);
  border-radius: var(--dino-card-radius);
}
#dino-kart-cta .dino-sales-cards > article { border-color: rgb(255 255 255 / 14%); }
#dino-kart-spec-grid > div,
.dino-used-why .dino-card { border-left: 3px solid var(--dino-red, #c00); }
#dino-parts-grid article,
.dino-home-craft .dino-card { border-top: 3px solid var(--dino-red, #c00); }
@media (hover: hover) {
  :is(#dino-intro, #dino-kart-models, .dino-model-cards) article:hover { border-color: var(--dino-red, #c00); }
}

/* ---------- 8. Motion: hero entrance + scroll reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* No opacity on the H1 or the hero image: they are LCP candidates. */
  #dino-kart-hero-image,
  #dino-hero-kart { animation: dino-kart-in 0.9s var(--dino-ease-out) both; }
  :is(#dino-kart-lead, #dino-hero-copy, #dino-kart-hero .brxe-container) > :not(h1) {
    animation: dino-rise 0.6s var(--dino-ease-out) both;
  }
  :is(#dino-kart-lead, #dino-hero-copy, #dino-kart-hero .brxe-container) > :nth-child(2) { animation-delay: 60ms; }
  :is(#dino-kart-lead, #dino-hero-copy, #dino-kart-hero .brxe-container) > :nth-child(3) { animation-delay: 120ms; }
  :is(#dino-kart-lead, #dino-hero-copy, #dino-kart-hero .brxe-container) > :nth-child(n+4) { animation-delay: 180ms; }
  #dino-kart-hero .brxe-container > .dino-split { animation: none; }

  @supports (animation-timeline: view()) {
    :is(#dino-intro article, #dino-kart-models > *, .dino-model-cards > *, #dino-parts-grid > *,
      #dino-kart-spec-grid > *, .dino-reveal > *, .dino-gallery > *, .dino-views .dino-view-img,
      img.dino-photo) {
      animation: dino-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
/* Keyframes use the individual `translate`/`scale` properties so they never hold `transform`
   and block the hover lifts above. */
@keyframes dino-kart-in {
  from { translate: 56px 0; scale: 0.97; }
}
@keyframes dino-rise {
  from { opacity: 0; translate: 0 14px; }
}
/* Reveal moves, never hides: content stays visible before it enters the viewport
   (full-page screenshots, print, find-in-page, crawlers). */
@keyframes dino-reveal {
  from { translate: 0 24px; }
}
@media print {
  * { animation: none !important; }
}