/*
 * Darja Rihla Homepage Scroll Journey
 * Additive visual layer for the existing #drHomePreview homepage.
 * Does not replace the existing homepage layout, content or theme system.
 */

#drHomePreview {
  --dr-journey-progress: 0;
  --dr-depth-shift: 0px;
  --dr-journey-accent: var(--gold);
}

/* The existing spine becomes the continuous route through the page. */
#drHomePreview .spine {
  overflow: visible;
  transition: background-color 700ms ease;
}

#drHomePreview .spine span {
  box-shadow:
    0 0 10px color-mix(in srgb, var(--dr-journey-accent) 68%, transparent),
    0 0 26px color-mix(in srgb, var(--dr-journey-accent) 28%, transparent);
  background: linear-gradient(
    to bottom,
    var(--cyan),
    var(--dr-journey-accent) 58%,
    var(--gold)
  );
  transition: background 700ms ease, box-shadow 700ms ease;
}

#drHomePreview .spine::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--dr-journey-progress) * 100%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dr-journey-accent);
  box-shadow:
    0 0 8px var(--dr-journey-accent),
    0 0 20px color-mix(in srgb, var(--dr-journey-accent) 65%, transparent),
    0 0 42px color-mix(in srgb, var(--dr-journey-accent) 28%, transparent);
  transform: translate(-50%, -50%);
  transition: background-color 700ms ease, box-shadow 700ms ease;
}

/* Background light planes move at different depths. */
#drHomePreview .lamp {
  margin-top: calc(var(--dr-depth-shift) * -0.34);
}

#drHomePreview .grain {
  background-position:
    0 calc(var(--dr-depth-shift) * -0.08),
    0 0;
}

/* Each existing section becomes a quiet waypoint, not a flying card. */
#drHomePreview .dr-journey-section {
  position: relative;
  isolation: isolate;
}

#drHomePreview .dr-journey-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -5vw;
  top: 8%;
  width: min(42vw, 580px);
  height: 72%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  filter: blur(70px);
  background: color-mix(in srgb, var(--dr-section-accent) 12%, transparent);
  transform: translate3d(-5%, 26px, 0) scale(.92);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2,.7,.2,1);
}

#drHomePreview .dr-journey-section.dr-journey-active::before {
  opacity: .78;
  transform: translate3d(0, 0, 0) scale(1);
}

/* A small pulse announces where a section meets the spine. */
#drHomePreview .dr-journey-marker {
  position: absolute;
  left: max(-8px, calc((100vw - 1240px) / -2 - 28px));
  top: 36px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--dr-section-accent);
  background: var(--bg);
  opacity: 0;
  transform: scale(.45);
  transition: opacity 500ms ease, transform 700ms cubic-bezier(.2,.8,.2,1), box-shadow 700ms ease;
  pointer-events: none;
}

#drHomePreview .dr-journey-section.dr-journey-active > .dr-journey-marker {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 18px color-mix(in srgb, var(--dr-section-accent) 72%, transparent);
}

/* The Editorial Map wakes as one system when it enters the journey. */
#drHomePreview .map-panel .map-route {
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
}

#drHomePreview .map-panel .map-hub,
#drHomePreview .map-panel .map-centre-ring,
#drHomePreview .map-panel .map-centre-core,
#drHomePreview .map-panel .map-centre-label {
  opacity: 0;
}

#drHomePreview .map-panel.dr-map-awake .map-route {
  animation: drJourneyRouteDraw 1050ms cubic-bezier(.2,.8,.2,1) forwards;
}

#drHomePreview .map-panel.dr-map-awake .map-route:nth-of-type(2) { animation-delay: 90ms; }
#drHomePreview .map-panel.dr-map-awake .map-route:nth-of-type(3) { animation-delay: 180ms; }
#drHomePreview .map-panel.dr-map-awake .map-route:nth-of-type(4) { animation-delay: 270ms; }
#drHomePreview .map-panel.dr-map-awake .map-route:nth-of-type(5) { animation-delay: 360ms; }
#drHomePreview .map-panel.dr-map-awake .map-route:nth-of-type(6) { animation-delay: 450ms; }
#drHomePreview .map-panel.dr-map-awake .map-route:nth-of-type(7) { animation-delay: 540ms; }
#drHomePreview .map-panel.dr-map-awake .map-route:nth-of-type(8) { animation-delay: 630ms; }

#drHomePreview .map-panel.dr-map-awake .map-hub,
#drHomePreview .map-panel.dr-map-awake .map-centre-ring,
#drHomePreview .map-panel.dr-map-awake .map-centre-core,
#drHomePreview .map-panel.dr-map-awake .map-centre-label {
  animation: drJourneyNodeReveal 620ms ease forwards;
}

#drHomePreview .map-panel.dr-map-awake .map-centre-ring,
#drHomePreview .map-panel.dr-map-awake .map-centre-core,
#drHomePreview .map-panel.dr-map-awake .map-centre-label { animation-delay: 120ms; }
#drHomePreview .map-panel.dr-map-awake .map-hub:nth-of-type(1) { animation-delay: 260ms; }
#drHomePreview .map-panel.dr-map-awake .map-hub:nth-of-type(2) { animation-delay: 340ms; }
#drHomePreview .map-panel.dr-map-awake .map-hub:nth-of-type(3) { animation-delay: 420ms; }
#drHomePreview .map-panel.dr-map-awake .map-hub:nth-of-type(4) { animation-delay: 500ms; }
#drHomePreview .map-panel.dr-map-awake .map-hub:nth-of-type(5) { animation-delay: 580ms; }
#drHomePreview .map-panel.dr-map-awake .map-hub:nth-of-type(6) { animation-delay: 660ms; }
#drHomePreview .map-panel.dr-map-awake .map-hub:nth-of-type(7) { animation-delay: 740ms; }
#drHomePreview .map-panel.dr-map-awake .map-hub:nth-of-type(8) { animation-delay: 820ms; }

/* Existing gates gain depth and a restrained light pass. */
#drHomePreview .gate {
  transform-style: preserve-3d;
  will-change: transform;
}

#drHomePreview .gate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent 70%);
  transform: translateX(-125%);
  opacity: 0;
}

#drHomePreview .gate:hover::after,
#drHomePreview .gate:focus-visible::after {
  animation: drJourneyGateLight 850ms ease-out;
}

/* Theme panels retain their identity while changing with more perceived depth. */
#drHomePreview .theme-detail {
  transition: opacity 300ms ease, filter 420ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
}

#drHomePreview .theme-detail.dr-theme-entering {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(12px) scale(.99);
}

@keyframes drJourneyRouteDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes drJourneyNodeReveal {
  from { opacity: 0; transform: scale(.8); transform-origin: center; }
  to { opacity: 1; transform: scale(1); transform-origin: center; }
}

@keyframes drJourneyGateLight {
  0% { transform: translateX(-125%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(125%); opacity: 0; }
}

@media (max-width: 850px), (pointer: coarse) {
  #drHomePreview .dr-journey-marker { display: none; }
  #drHomePreview .lamp { margin-top: calc(var(--dr-depth-shift) * -0.16); }
  #drHomePreview .dr-journey-section::before { filter: blur(52px); opacity: .38; }
}

@media (prefers-reduced-motion: reduce) {
  #drHomePreview { --dr-depth-shift: 0px !important; }
  #drHomePreview .lamp { margin-top: 0; }
  #drHomePreview .map-panel .map-route { stroke-dashoffset: 0; }
  #drHomePreview .map-panel .map-hub,
  #drHomePreview .map-panel .map-centre-ring,
  #drHomePreview .map-panel .map-centre-core,
  #drHomePreview .map-panel .map-centre-label { opacity: 1; }
  #drHomePreview .dr-journey-section::before,
  #drHomePreview .dr-journey-marker,
  #drHomePreview .gate::after { display: none; }
}

/* ================================================================
 * Homepage World Engine, five focused effects
 * 1 floating seal, 2 light horizons, 3 ambient theme colour,
 * 4 selective reflections, 5 foreground architectural glass.
 * ================================================================ */

#drHomePreview {
  --dr-world-active: var(--gold);
  --dr-world-rgb: 198, 167, 104;
  --dr-world-y: 18vh;
  --dr-engine-scroll: 0px;
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(3, 10, 18, .28), rgba(3, 10, 18, .62)),
    url("Darja-Rihla-Homepage-World-Engine-Background-2026-09-06.png") center top / cover fixed;
}

/* Deep field plus a movable band of colour. */
#drHomePreview .dr-world-environment,
#drHomePreview .dr-world-horizon,
#drHomePreview .dr-foreground-glass {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#drHomePreview .dr-world-environment {
  z-index: 0;
  background:
    radial-gradient(ellipse 52% 34% at 74% var(--dr-world-y), rgba(var(--dr-world-rgb), .23), transparent 69%),
    linear-gradient(115deg, rgba(124, 234, 255, .055), transparent 34%, rgba(var(--dr-world-rgb), .055) 72%, transparent);
  mix-blend-mode: screen;
  opacity: .9;
  transition: background 900ms ease, opacity 600ms ease;
}

#drHomePreview .dr-world-horizon {
  z-index: 1;
  top: var(--dr-world-y);
  bottom: auto;
  height: 2px;
  background: linear-gradient(90deg, transparent 4%, rgba(var(--dr-world-rgb), .15) 22%, rgba(var(--dr-world-rgb), .88) 52%, rgba(124, 234, 255, .25) 78%, transparent 96%);
  box-shadow:
    0 0 14px rgba(var(--dr-world-rgb), .7),
    0 0 55px rgba(var(--dr-world-rgb), .32),
    0 -28px 90px rgba(var(--dr-world-rgb), .12);
  opacity: .76;
  transform: translateY(-50%);
  transition: top 850ms cubic-bezier(.2,.8,.2,1), background 700ms ease, box-shadow 700ms ease;
}

/* Architectural foreground, deliberately sparse and faster than content. */
#drHomePreview .dr-foreground-glass {
  z-index: 12;
  overflow: hidden;
}

#drHomePreview .dr-glass-plane {
  position: absolute;
  border: 1px solid rgba(215, 240, 255, .13);
  background: linear-gradient(125deg, rgba(235, 248, 255, .075), rgba(var(--dr-world-rgb), .025) 42%, transparent 76%);
  box-shadow: inset 0 1px rgba(255,255,255,.11), 0 22px 80px rgba(0,0,0,.08);
  backdrop-filter: blur(2px) saturate(116%);
  -webkit-backdrop-filter: blur(2px) saturate(116%);
  opacity: .54;
  will-change: transform;
  transition: border-color 700ms ease, background 700ms ease;
}

#drHomePreview .dr-glass-plane:nth-child(1) {
  width: min(24vw, 340px); height: 64vh; right: -9vw; top: 9vh;
  transform: translate3d(0, calc(var(--dr-engine-scroll) * -.23), 0) rotate(-7deg);
}
#drHomePreview .dr-glass-plane:nth-child(2) {
  width: min(17vw, 230px); height: 48vh; left: -8vw; top: 58vh;
  transform: translate3d(0, calc(var(--dr-engine-scroll) * -.31), 0) rotate(9deg);
}
#drHomePreview .dr-glass-plane:nth-child(3) {
  width: min(13vw, 190px); height: 38vh; right: 4vw; top: 116vh;
  transform: translate3d(0, calc(var(--dr-engine-scroll) * -.38), 0) rotate(5deg);
}

#drHomePreview > .shell,
#drHomePreview > .search-layer { position: relative; z-index: 4; }

/* 1. The existing logo becomes a smaller floating gold-glass seal. */
#drHomePreview .homepage-featured-mark {
  position: relative;
  z-index: 8;
  width: clamp(168px, 16vw, 205px);
  margin: 34px 0 -52px clamp(0px, 2vw, 28px);
  padding: 7px;
  border: 1px solid rgba(221, 188, 111, .55);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(255, 233, 178, .15), rgba(9, 21, 32, .62) 54%, rgba(198, 167, 104, .13));
  box-shadow: 0 20px 55px rgba(0,0,0,.34), 0 0 34px rgba(198,167,104,.18), inset 0 1px rgba(255,244,213,.3);
  backdrop-filter: blur(10px) saturate(122%);
  -webkit-backdrop-filter: blur(10px) saturate(122%);
  transform: translate3d(0, calc(var(--dr-engine-scroll) * -.035), 0);
}

#drHomePreview .homepage-featured-mark img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.92) contrast(1.08) brightness(1.04);
}

#drHomePreview .homepage-featured-mark::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 2;
  background: linear-gradient(112deg, transparent 24%, rgba(255,247,222,.32) 44%, transparent 58%);
  transform: translateX(-125%);
  animation: drSealGlint 8s ease-in-out infinite;
  pointer-events: none;
}

/* 4. Reflections exist only on the four explicitly selected objects. */
#drHomePreview .homepage-featured-mark::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: calc(100% + 8px); height: 38%;
  background: url("https://darjarihla.com/wp-content/uploads/2026/03/darja-rihla-startpagina-blog-afbeelding.png") center / cover;
  opacity: .13;
  filter: blur(2px) saturate(.75);
  transform: scaleY(-1) perspective(180px) rotateX(16deg);
  transform-origin: top;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 88%);
  pointer-events: none;
}

#drHomePreview .map-panel,
#drHomePreview .dd-digital-feature,
#drHomePreview .lessons-panel { overflow: visible; }

#drHomePreview .map-panel::after,
#drHomePreview .dd-digital-feature::after,
#drHomePreview .lessons-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6%; right: 6%; top: calc(100% + 8px); height: 58px;
  opacity: .22;
  filter: blur(9px);
  transform: scaleY(-1) perspective(220px) rotateX(24deg);
  transform-origin: top;
  mask-image: linear-gradient(to bottom, #000, transparent 86%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 86%);
  pointer-events: none;
  animation: drWaterReflection 7s ease-in-out infinite alternate;
}

#drHomePreview .map-panel { position: relative; }
#drHomePreview .map-panel::after {
  background: repeating-radial-gradient(ellipse at 50% 0, rgba(124,234,255,.54) 0 1px, transparent 2px 8px);
}
#drHomePreview .dd-digital-feature::after {
  background: linear-gradient(90deg, transparent, rgba(0,137,236,.82) 20%, rgba(126,218,255,.44) 55%, transparent);
}
#drHomePreview .lessons-panel { position: relative; }
#drHomePreview .lessons-panel::after {
  background: linear-gradient(90deg, transparent 4%, rgba(174,28,40,.58) 22%, rgba(246,246,241,.4) 42% 57%, rgba(33,71,142,.58) 70%, rgba(238,138,60,.72) 88%, transparent 97%);
}

/* DD Digital keeps its electric identity, with readable typography. */
#drHomePreview .dd-digital-feature {
  background: linear-gradient(128deg, rgba(231,244,250,.98), rgba(197,227,240,.96));
  box-shadow: 10px 10px 0 #0874d1, 0 32px 90px rgba(0,137,236,.16);
}
#drHomePreview .dd-digital-feature h2,
#drHomePreview .dd-scope p { color: #081522 !important; -webkit-text-fill-color: #081522 !important; text-shadow: 0 1px rgba(255,255,255,.3); }
#drHomePreview .dd-intro { color: #314555 !important; }

/* Dutch identity: a refined flag edge plus a distinct orange energy layer. */
#drHomePreview .lessons-panel {
  border-color: rgba(238,138,60,.62);
  background:
    linear-gradient(90deg, #ae1c28 0 33.333%, #f4f2ea 33.333% 66.666%, #21468b 66.666%) top / 100% 4px no-repeat,
    radial-gradient(circle at 82% 42%, rgba(238,138,60,.2), transparent 34%),
    linear-gradient(120deg, rgba(238,138,60,.11), rgba(8,19,30,.83));
  box-shadow: 0 26px 86px rgba(238,138,60,.12), inset 0 1px rgba(255,255,255,.08);
}
#drHomePreview .lessons-panel .eyebrow { color: #ff9d49; }
#drHomePreview .lessons-panel .primary { background: #ee8a3c; }

html[data-theme="light"] #drHomePreview,
body.theme-light #drHomePreview {
  background:
    linear-gradient(180deg, rgba(226,240,246,.28), rgba(233,240,240,.58)),
    url("Darja-Rihla-Homepage-World-Engine-Background-2026-09-06.png") center top / cover fixed;
}
html[data-theme="light"] #drHomePreview .dr-world-environment,
body.theme-light #drHomePreview .dr-world-environment { opacity: .64; mix-blend-mode: multiply; }
html[data-theme="light"] #drHomePreview .dr-glass-plane,
body.theme-light #drHomePreview .dr-glass-plane {
  border-color: rgba(255,255,255,.48);
  background: linear-gradient(125deg, rgba(255,255,255,.3), rgba(var(--dr-world-rgb), .055), transparent 76%);
  box-shadow: inset 0 1px rgba(255,255,255,.72), 0 28px 80px rgba(26,62,78,.12);
}

@keyframes drSealGlint {
  0%, 62% { transform: translateX(-125%); opacity: 0; }
  70% { opacity: .8; }
  84%, 100% { transform: translateX(125%); opacity: 0; }
}

@keyframes drWaterReflection {
  from { background-position: 0 0; transform: scaleY(-1) perspective(220px) rotateX(24deg) translateX(-3px); }
  to { background-position: 22px 5px; transform: scaleY(-.9) perspective(220px) rotateX(24deg) translateX(4px); }
}

@media (max-width: 850px) {
  #drHomePreview { background-attachment: scroll; }
  #drHomePreview .homepage-featured-mark { width: 156px; margin: 24px 0 -28px 8px; }
  #drHomePreview .dr-glass-plane:nth-child(1) { width: 28vw; right: -17vw; opacity: .36; }
  #drHomePreview .dr-glass-plane:nth-child(2),
  #drHomePreview .dr-glass-plane:nth-child(3) { display: none; }
  #drHomePreview .map-panel::after,
  #drHomePreview .dd-digital-feature::after,
  #drHomePreview .lessons-panel::after { height: 34px; opacity: .16; }
}

@media (prefers-reduced-motion: reduce) {
  #drHomePreview { --dr-engine-scroll: 0px !important; background-attachment: scroll; }
  #drHomePreview .homepage-featured-mark { transform: none; }
  #drHomePreview .homepage-featured-mark::before,
  #drHomePreview .map-panel::after,
  #drHomePreview .dd-digital-feature::after,
  #drHomePreview .lessons-panel::after { animation: none; }
  #drHomePreview .dr-glass-plane { transform: none !important; }
}