/* The luminous mark is fully particle-built; the SVG is its static fallback. */
.particle-intro {
  position: relative;
  height: 175svh;
  min-height: 1000px;
  background: #09151e;
  color: var(--paper);
  isolation: isolate;
  scroll-margin-top: -110px;
  --intro-progress: 0;
  --intro-reveal: 0;
  --intro-copy-opacity: 1;
  --intro-hero-copy: 0;
}
.particle-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 590px;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
}
.intro-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: calc(1 - var(--intro-reveal));
  background: radial-gradient(ellipse at 17% 38%, #284c6652, transparent 45%),
    radial-gradient(ellipse at 82% 44%, #6b4e8034, transparent 42%),
    linear-gradient(180deg, #07131d, #0e1d2a 66%, #12242f);
}
.intro-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .18;
  background: radial-gradient(ellipse at 50% 43%, #a4dcf116, transparent 46%);
}
.particle-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.intro-surface { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.intro-surface a { pointer-events: auto; }
.intro-surface[inert] { pointer-events: none; }
.intro-surface[inert] a { pointer-events: none; }
.particle-stage > .intro-coast {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  max-height: none;
  z-index: 0;
  opacity: calc(.22 + var(--intro-reveal) * .78);
}
.intro-coast .hero-photo { transform: scale(calc(1.12 - var(--intro-reveal) * .12)); transform-origin: 65% 55%; }
.intro-coast .hero-copy, .intro-coast .hero-bottom { opacity: var(--intro-hero-copy); }
.intro-coast .hero-copy { filter: blur(calc((1 - var(--intro-hero-copy)) * 5px)); }
.particle-logo-fallback {
  position: absolute;
  top: 43%;
  left: 50%;
  width: min(76vw, 1080px);
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  opacity: var(--intro-copy-opacity);
  filter: drop-shadow(0 1px 0 #e6e9ff38) drop-shadow(0 7px 20px #7386cb16);
}
.particle-intro[data-particles="ready"] .particle-logo-fallback { opacity: 0; }
.particle-intro[data-motion-reduced="true"] .particle-logo-fallback { opacity: var(--intro-copy-opacity); }
.particle-intro[data-motion-reduced="true"] .particle-canvas { visibility: hidden; }
.intro-eyebrow, .intro-copy, .intro-bottom { position: absolute; z-index: 2; opacity: var(--intro-copy-opacity); }
.intro-eyebrow {
  left: 24px;
  right: 24px;
  top: 23%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #b5c9d5;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-align: center;
  pointer-events: none;
}
.intro-spark { font-size: 23px; color: var(--blue); font-weight: 400; }
.intro-copy { top: 64%; left: var(--gutter); right: var(--gutter); text-align: center; }
.intro-copy > p { font-size: clamp(22px, 2.5vw, 36px); letter-spacing: -.05em; font-weight: 400; color: #e0eaf0; }
.intro-enter {
  display: inline-flex;
  align-items: center;
  gap: 42px;
  margin-top: 30px;
  padding: 8px 8px 8px 30px;
  border: 1px solid #b5d5e159;
  background: linear-gradient(120deg, #a4dcf10d, #c5a7ee0a);
  border-radius: 40px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  transition: background .3s, border-color .3s, transform .3s;
}
.intro-enter-arrow { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; background: var(--blue); color: var(--ink); font-size: 26px; font-weight: 400; transition: transform .35s, background .35s; }
.intro-enter:hover, .intro-enter:focus-visible { background: #c5a7ee16; border-color: var(--lavender); transform: translateY(-3px); }
.intro-enter:hover .intro-enter-arrow, .intro-enter:focus-visible .intro-enter-arrow { transform: rotate(45deg); background: var(--lavender); }
.intro-bottom { bottom: 29px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: center; gap: 24px; color: #8da6b5; font-size: 9px; }
.intro-location, .intro-scroll { letter-spacing: .13em; font-size: 8px; }
.intro-gesture { display: flex; align-items: center; gap: 10px; }
.gesture-orbit { display: block; width: 15px; height: 15px; border: 1px solid #a4dcf15c; border-radius: 50%; position: relative; }
.gesture-orbit::after { content: ''; position: absolute; top: -2px; left: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--lavender); }
.intro-touch-hint { display: none; }
.intro-scroll { display: inline-flex; align-items: center; gap: 19px; min-height: 44px; color: var(--blue); }
.intro-scroll > span:last-child { font-size: 22px; transition: transform .3s; }
.intro-scroll:hover > span:last-child { transform: translateY(4px); }
.particle-intro[data-particles="ready"] .intro-eyebrow > span { animation: intro-arrive 1s .4s both; }
.particle-intro[data-particles="ready"] .intro-copy > p { animation: intro-arrive 1s 1.1s both; }
.particle-intro[data-particles="ready"] .intro-bottom > * { animation: intro-arrive 1s 1.7s both; }
@keyframes intro-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
#ride { scroll-margin-top: -110px; }
html[lang="ar"] .intro-eyebrow { font-size: 14px; letter-spacing: 0; }
html[lang="ar"] .intro-copy > p { font-size: clamp(21px, 2.2vw, 31px); letter-spacing: 0; }
html[lang="ar"] .intro-enter { font-size: 13px; letter-spacing: 0; padding-inline: 26px 7px; }
html[lang="ar"] .intro-bottom { font-size: 12px; }
html[lang="ar"] .intro-location, html[lang="ar"] .intro-scroll { font-size: 11px; letter-spacing: 0; }
html[data-motion="off"] .intro-gesture, .particle-intro:not([data-particles="ready"]) .intro-gesture { display: none; }
@media (pointer: coarse) { .intro-pointer-hint { display: none; } .intro-touch-hint { display: inline; } }
@media (max-width: 760px) {
  .particle-intro { height: 160svh; min-height: 930px; scroll-margin-top: -88px; }
  .particle-stage { min-height: 580px; }
  .particle-logo-fallback { width: 90vw; }
  .intro-eyebrow { top: 27%; font-size: 8px; gap: 8px; letter-spacing: .14em; }
  .intro-spark { font-size: 20px; }
  .intro-copy { top: 59%; }
  .intro-copy > p { font-size: 21px; }
  .intro-enter { margin-top: 25px; font-size: 9px; }
  .intro-bottom { bottom: 22px; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 9px; }
  .intro-location { display: none; }
  .intro-gesture { width: 100%; justify-content: center; }
  .intro-scroll { font-size: 8px; min-height: 38px; }
  html[lang="ar"] .intro-eyebrow { font-size: 12px; }
  html[lang="ar"] .intro-copy > p { font-size: 22px; }
  html[lang="ar"] .intro-enter { font-size: 12px; }
  html[lang="ar"] .intro-bottom { font-size: 11px; }
  #ride { scroll-margin-top: -88px; }
}
html[data-motion="off"] .intro-coast .hero-photo { transform: none; }
html[data-motion="off"] .intro-coast .hero-copy { filter: none; }
@media (max-height: 650px) and (min-width: 761px) { .intro-eyebrow { top: 22%; } .intro-copy { top: 66%; } .intro-enter { margin-top: 16px; } }