/* Opt-in only: shared pages and the English home keep their current layout. */
html:has(.home-page) {
  scrollbar-width: thin;
  scrollbar-color: #514264 #08070b;
}

/* Applied only after the accessible restore control has been created.
   The document keeps its native scrolling and keyboard behaviour. */
html.luma-scrollbar-hidden { scrollbar-width: none; }
html.luma-scrollbar-hidden::-webkit-scrollbar { display: none; }

.luma-view-controls {
  position: fixed;
  z-index: 5;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: flex;
  gap: 0.35rem;
}

.luma-view-controls button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: 0.65rem;
  background: var(--color-background);
  color: var(--color-muted);
  cursor: pointer;
}

.luma-view-controls button:hover,
.luma-view-controls button[aria-pressed="true"] { color: var(--color-accent-bright); }
.luma-view-controls button:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 3px;
}
.luma-view-controls button:disabled { cursor: wait; }
.luma-view-controls svg { width: 1rem; height: 1rem; }
.luma-view-controls [hidden] { display: none; }
/* Keep footer links above the fixed controls, including on narrow screens. */
.home-page .site-footer { padding-block: 1.25rem 4.25rem; }

.home-page .luma-action {
  margin: -5rem auto 4rem;
  position: relative;
  z-index: 2;
  text-align: center;
}

.home-page .luma-title-wrap { position: relative; }
.home-page .luma-dust { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .home-page .luma-active {
    /* Preserve the original 135svh reveal, then allow 45svh for the footer.
       The page ends with this pinned scene, without an abrupt unpin. */
    height: 280svh;
    min-height: 70rem;
    view-timeline-name: --luma-scene;
    view-timeline-axis: block;
  }

  .luma-active .luma-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 30rem;
    overflow: clip;
    isolation: isolate;
  }

  .luma-active .hero {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: 100%;
    padding: 3rem 1.25rem 7rem;
  }

  /* The skip-link target starts at the same origin as the pinned scene. */
  .luma-active #contenu { position: absolute; inset: 0; }

  .luma-active .hero-content { margin: 0; }
  .luma-active .luma-title-wrap { width: fit-content; margin-inline: auto; }

  .luma-active .hero-glow {
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
    background: none;
    filter: none;
  }
  .luma-active .luma-halo-field {
    position: absolute;
    left: var(--halo-centre-x, 50%);
    top: var(--halo-centre-y, 43%);
    width: min(42rem, 105vw);
    height: min(26rem, 64vw);
    transform: translate(-50%, -50%);
    translate: var(--push-x, 0px) var(--push-y, 0px);
    transition: translate 500ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .luma-active .luma-halo-field::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse, rgb(159 91 236 / 38%), rgb(111 57 190 / 15%) 40%, transparent 70%);
    animation: luma-light 9s ease-in-out infinite alternate;
  }

  .luma-active .hero::before { display: none; }
  .luma-active .luma-dust { display: block; position: absolute; inset: 0; pointer-events: none; }

  .luma-active .luma-dust-piece {
    position: absolute;
    inset: 0;
    margin: 0;
    /* Each piece contains only a small clipped cell of the real word. */
    clip-path: inset(var(--cut));
    mask-image: radial-gradient(circle, #000 1px, transparent 1.6px);
    mask-size: 3px 3px;
    -webkit-mask-image: radial-gradient(circle, #000 1px, transparent 1.6px);
    -webkit-mask-size: 3px 3px;
    pointer-events: none;
  }

  .luma-active:not(.luma-native):not(.luma-paused) .luma-dust-piece {
    will-change: transform, opacity;
  }

  .luma-active .preview-section {
    position: absolute;
    /* Also cover the first frame before the native timeline resolves. */
    opacity: 0;
    inset: 0;
    display: grid;
    align-items: center;
    width: min(calc(100% - 3rem), 90rem);
    margin: 0 auto;
    padding: 2rem 0;
    pointer-events: none;
  }

  .luma-active .preview-section::before { display: none; }
  .luma-active .preview-frame { width: fit-content; max-width: 100%; margin-inline: auto; }
  .luma-active .preview-image { width: auto; max-width: 100%; max-height: calc(100svh - 4rem); object-fit: contain; }

  .luma-active .luma-action { position: absolute; inset: auto 1rem max(2rem, 14svh); margin: 0; }

  .luma-active .site-footer {
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
  }

  /* One set of keyframes for both the CSS timeline and the JS fallback.
     The fallback pauses at a negative delay; it never runs a timer loop. */
  .luma-active .brand-name:not(.luma-dust-piece),
  .luma-active .site-header,
  .luma-active .hero-glow,
  .luma-active .tagline,
  .luma-active .luma-action,
  .luma-active .luma-dust-piece,
  .luma-active .site-footer,
  .luma-active .preview-section {
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-delay: calc(var(--luma-progress, 0) * -1s);
  }

  .luma-active .brand-name:not(.luma-dust-piece) { animation-name: luma-title; }
  .luma-active .site-header { animation-name: luma-action; }
  .luma-active .hero-glow { animation-name: luma-tagline; }
  .luma-active .tagline { animation-name: luma-tagline; }
  .luma-active .luma-action { animation-name: luma-action; }
  .luma-active .luma-dust-piece { animation-name: luma-disperse; }
  .luma-active .preview-section { animation-name: luma-preview; }
  .luma-active .site-footer { animation-name: luma-footer; }

  @supports (animation-timeline: view()) and (animation-range: contain 0% contain 100%) {
    .luma-native .brand-name:not(.luma-dust-piece),
    .luma-native .site-header,
    .luma-native .hero-glow,
    .luma-native .tagline,
    .luma-native .luma-action,
    .luma-native .luma-dust-piece,
    .luma-native .site-footer,
    .luma-native .preview-section {
      animation-delay: 0s;
      animation-play-state: running;
      animation-timeline: --luma-scene;
      animation-range: contain 0% contain 100%;
    }
  }

  .luma-paused .luma-halo-field::before,
  .luma-paused .luma-halo-field::after { animation-play-state: paused; }

  @media (max-width: 700px) {
    .home-page .luma-active { min-height: 60rem; }
    .luma-active .preview-section { width: calc(100% - 1rem); }
    .luma-active .hero { padding-inline: 1rem; }
    .luma-active .luma-action { bottom: max(2.5rem, 22svh); }
  }

  /* Short viewports / high zoom use the ordinary document flow. */
  @media (max-height: 500px) {
    .home-page .luma-active { height: auto; min-height: 0; }
    .luma-active .luma-stage { position: relative; height: auto; min-height: 0; overflow: visible; }
    .luma-active #contenu { position: static; }
    .luma-active .hero { position: relative; height: auto; min-height: 28rem; }
    .luma-active .luma-dust { display: none; }
    .luma-active .brand-name:not(.luma-dust-piece), .luma-active .tagline,
    .luma-active .site-header, .luma-active .hero-glow,
    .luma-active .site-footer,
    .luma-active .preview-section, .luma-active .luma-action { animation: none; }
    .luma-active .site-footer { position: relative; inset: auto; opacity: 1; visibility: visible; }
    .luma-active .luma-halo-field::before { animation: none; }
    .luma-active .preview-section { position: relative; opacity: 1; padding: 0 0 2rem; }
    .luma-active .preview-image { max-height: none; }
    .luma-active .luma-action { position: relative; inset: auto; margin: -4rem auto 3rem; }
  }
}

@keyframes luma-light {
  from { transform: translate(-3%, -2%) rotate(-8deg) scale(0.96); opacity: 0.65; }
  to { transform: translate(3%, 2%) rotate(8deg) scale(1.06); opacity: 0.95; }
}
@keyframes luma-title {
  0% { opacity: 1; }
  4.5%, 100% { opacity: 0; }
}
@keyframes luma-tagline {
  0% { opacity: 1; }
  26.25%, 100% { opacity: 0; }
}
/* Visibility changes only once the fade is complete. Hidden content cannot
   receive clicks or keyboard focus; reversing the timeline restores both. */
@keyframes luma-action {
  0% { opacity: 1; visibility: visible; }
  26.25%, 100% { opacity: 0; visibility: hidden; }
}
@keyframes luma-disperse {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  4.5% { opacity: 1; transform: translate(0, 0) scale(1); }
  30% { opacity: 0.65; }
  60%, 100% { opacity: 0; transform: translate(var(--drift-x), var(--drift-y)) scale(0.94); }
}
@keyframes luma-preview {
  0%, 7.5% { opacity: 0; transform: translateY(3rem) scale(0.94); }
  75% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 1; transform: translateY(-3rem) scale(0.86); }
}
@keyframes luma-footer {
  0%, 75% { opacity: 0; visibility: hidden; transform: translateY(100%); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  100% { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* Orbital arrival: the h1 is preserved, hidden only during the first blast.
   Decorative rock transforms and pointer translations use separate properties. */
.home-page .luma-arrival { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .luma-arrival-wordmark { position: relative; }
  .luma-arrival-copy { display: block; }
  .luma-active { --arrival-duration: 7200ms; }
  .luma-active .luma-arrival { display: block; }

  .luma-intro .luma-arrival-wordmark {
    animation: arrival-wordmark var(--arrival-duration) cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .luma-intro .luma-arrival-copy {
    animation: arrival-copy var(--arrival-duration) ease-out both;
  }
  .luma-intro .primary-action {
    animation: arrival-action var(--arrival-duration) ease-out both;
  }
  .luma-intro .luma-halo-field::before {
    animation: arrival-halo var(--arrival-duration) linear both;
  }
  .luma-intro .luma-halo-field::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse, rgb(236 213 255 / 85%), rgb(178 106 255 / 65%) 18%, rgb(123 56 221 / 30%) 44%, transparent 70%);
    animation: arrival-flare var(--arrival-duration) ease-out both;
  }
  .luma-arrival {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .luma-arrival-core,
  .luma-arrival-beam {
    display: none;
    position: absolute;
    left: var(--halo-centre-x);
    top: var(--halo-centre-y);
  }
  .luma-intro .luma-arrival-core {
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    margin: -0.3rem;
    border-radius: 50%;
    background: #f6eeff;
    box-shadow: 0 0 1rem #d2b8ff, 0 0 3rem #9b64ef;
    animation: arrival-core var(--arrival-duration) ease-out both;
  }
  .luma-intro .luma-arrival-beam {
    display: block;
    width: min(32rem, 90vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, #a775ee, #f6eeff, #a775ee, transparent);
    animation: arrival-beam var(--arrival-duration) ease-out both;
  }
  .luma-arrival-piece {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--stone-size);
    height: var(--stone-size);
    opacity: 0.85;
    transform: translate(var(--orbit-x), var(--orbit-y)) translate(-50%, -50%);
    translate: var(--push-x, 0px) var(--push-y, 0px);
    transition: translate 500ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .luma-orbit-stone {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--stone-roundness, 46% 54% 49% 51%);
    background:
      radial-gradient(circle at 65% 30%, rgb(35 24 45 / 65%) 9%, transparent 18%),
      radial-gradient(circle at 32% 65%, rgb(35 24 45 / 50%) 8%, transparent 17%),
      linear-gradient(135deg, #b2a7bd, #756580 43%, #3c3048);
    box-shadow: inset -1px -2px 2px #241a34, inset 1px 1px 1px rgb(234 220 255 / 45%);
    transform: rotate(var(--stone-turn));
  }
  .is-luminous .luma-orbit-stone {
    background: radial-gradient(circle at 30% 25%, #f2e3ff, #b78cde 38%, #514064 80%);
  }
  .luma-arrival-piece.is-luminous::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(194 145 255 / 50%), transparent 70%);
    animation: orbit-glimmer 3.8s ease-in-out var(--glimmer-delay) infinite alternate;
  }
  .luma-arrival-piece.is-planet { --stone-roundness: 50%; }
  .is-planet .luma-orbit-stone {
    box-shadow: inset -3px -2px 3px rgb(12 8 24 / 85%), inset 1px 1px 2px rgb(255 243 255 / 65%);
  }
  .is-planet-lilac .luma-orbit-stone {
    background: linear-gradient(165deg, #b9a5e1 20%, #7b76bb 24%, #c7b9df 38%, #7778a9 43%, #aba1ce 59%, #5e4c83 64%, #9e88bc 80%);
  }
  .is-planet-amber .luma-orbit-stone {
    background: linear-gradient(165deg, #e4c6a7 20%, #a48288 26%, #d7b6a5 38%, #927689 44%, #dec0a5 60%, #9a7586 67%, #c6a0a5 80%);
  }
  .luma-arrival-piece.has-ring::after {
    content: "";
    position: absolute;
    inset: 30% -30%;
    border: 1px solid rgb(193 168 225 / 65%);
    border-radius: 50%;
    transform: rotate(-28deg);
  }
  .luma-orbit-stone::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 28% 24%, #e1c9ff, #ac79ef 40%, #704b9a);
    opacity: 0;
  }
  .luma-orbit-forming .luma-arrival-piece {
    animation: arrival-piece var(--arrival-duration) cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .luma-orbit-forming .luma-orbit-stone {
    animation: arrival-stone-turn var(--arrival-duration) ease-in-out both;
  }
  .luma-orbit-forming .luma-orbit-stone::before {
    animation: arrival-stone-surface var(--arrival-duration) cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .luma-paused .luma-arrival-piece,
  .luma-paused .luma-arrival-piece::after,
  .luma-paused .luma-orbit-stone,
  .luma-paused .luma-orbit-stone::before { animation-play-state: paused; }
  @media (max-height: 500px) {
    .luma-active .luma-arrival { display: none; }
    .luma-intro .luma-halo-field::before { animation: none; }
  }
}
@keyframes arrival-wordmark {
  0%, 72% { opacity: 0; clip-path: inset(0 50%); transform: scale(0.88); }
  85%, 100% { opacity: 1; clip-path: inset(-4rem); transform: scale(1); }
}
@keyframes arrival-copy {
  0%, 86% { opacity: 0; visibility: hidden; transform: translateY(0.5rem); }
  100% { opacity: 1; visibility: visible; transform: translateY(0); }
}
@keyframes arrival-action {
  0% { opacity: 0; visibility: hidden; transform: translateY(0.5rem); }
  20%, 100% { opacity: 1; visibility: visible; transform: translateY(0); }
}
@keyframes arrival-halo {
  0% { opacity: 0.75; transform: scale(0.3); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  30% { opacity: 0.7; transform: scale(var(--halo-expansion)); animation-timing-function: cubic-bezier(0.8, 0.05, 0.95, 0.2); }
  57%, 60% { opacity: 1; transform: scale(0.016); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  80% { opacity: 0.9; transform: scale(1.06); }
  100% { opacity: 0.65; transform: translate(-3%, -2%) rotate(-8deg) scale(0.96); }
}
@keyframes arrival-flare {
  0% { opacity: 0; transform: scale(0.08); }
  8% { opacity: 1; transform: scale(0.65); }
  30% { opacity: 0.7; transform: scale(var(--halo-expansion)); }
  57%, 100% { opacity: 0; transform: scale(0.016); }
}
@keyframes arrival-core {
  0% { opacity: 0; transform: scale(0.1); }
  3% { opacity: 1; transform: scale(1); }
  6% { opacity: 1; transform: scale(1.4); }
  15%, 100% { opacity: 0; transform: scale(5); }
}
@keyframes arrival-beam {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0); }
  5% { opacity: 0.8; transform: translate(-50%, -50%) scaleX(0.75); }
  15%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.1); }
}
@keyframes arrival-piece {
  0% { opacity: 0; transform: translate(var(--halo-centre-x), var(--halo-centre-y)) translate(-50%, -50%) scale(0.3); }
  10% { opacity: 1; }
  22% { opacity: 1; transform: translate(var(--burst-x), var(--burst-y)) translate(-50%, -50%) scale(0.85); }
  52%, 100% { opacity: 0.85; transform: translate(var(--orbit-x), var(--orbit-y)) translate(-50%, -50%) scale(1); }
}
@keyframes arrival-stone-surface {
  0%, 16% { opacity: 1; }
  52%, 100% { opacity: 0; }
}
@keyframes arrival-stone-turn {
  0%, 16% { transform: rotate(calc(var(--stone-turn) - 60deg)); border-radius: 50%; }
  52%, 100% { transform: rotate(var(--stone-turn)); border-radius: var(--stone-roundness, 46% 54% 49% 51%); }
}
@keyframes orbit-glimmer {
  from { opacity: 0.25; }
  to { opacity: 0.8; }
}

@media (forced-colors: active) {
  html:has(.home-page) { scrollbar-color: auto; }
  .luma-view-controls button { border-color: ButtonText; color: ButtonText; }
  .home-page .brand-name { background: none; color: CanvasText; text-shadow: none; }
  .home-page .hero-glow { display: none; }
}