/* SMACSS · State : éveil, dernière visite, départ vers un thème, mouvement réduit. */

/* Miniatures CSS figées hors écran (main.js pose .is-visible). */
.is-document-hidden *, .is-document-hidden *::before, .is-document-hidden *::after {
  animation-play-state: paused !important;
}
.js .door:not(.is-visible) :is(.goth-glow, .goth-grain, .reho-caret),
.js .door:not(.is-visible) .reho-head > :last-child::before {
  animation-play-state: paused;
}

/* L'œuvre sort de l'encre une fois décodée, au lieu d'apparaître d'un coup. */
.js .mini--goth img:not(.is-loaded) {
  opacity: 0;
}

/* Le curseur du mot-symbole prend la couleur du thème éveillé. */
.l-page:has(.door--goth:is(:focus-visible, .is-awake)):not(:has(.door:hover)) .wordmark-cursor,
.l-page:has(.door--goth:hover) .wordmark-cursor {
  color: var(--goth-wine);
}
.l-page:has(.door--reho:is(:focus-visible, .is-awake)):not(:has(.door:hover)) .wordmark-cursor,
.l-page:has(.door--reho:hover) .wordmark-cursor {
  color: var(--reho-red);
}
.l-page:has(.door--inst:is(:focus-visible, .is-awake)):not(:has(.door:hover)) .wordmark-cursor,
.l-page:has(.door--inst:hover) .wordmark-cursor {
  color: var(--inst-signal);
}

@media (min-width: 1024px) {
  .l-doors:has(.door:is(:hover, :focus-visible, .is-awake))
    .door:not(:hover, :focus-visible, .is-awake)::before {
    opacity: 0.55;
  }
}

/* Départ : la porte choisie prend l'écran, puis un voile à la couleur du thème. */
html:has(.door--goth.is-chosen) {
  --exit: var(--goth-bg);
}
html:has(.door--reho.is-chosen) {
  --exit: var(--reho-bg);
}
html:has(.door--inst.is-chosen) {
  --exit: var(--inst-desk);
}
.l-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--exit, var(--paper));
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-in;
}
.is-leaving .l-page::after {
  opacity: 1;
}
@media (min-width: 1024px) {
  .is-leaving .l-page::after {
    transition-delay: 380ms;
  }
  .is-leaving :is(.l-band, .l-cue) {
    opacity: 0;
    transition: opacity 300ms ease-in;
  }
  .is-leaving .l-doors > li:has(> .is-chosen) {
    flex-grow: 14;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-grid-glow, .art-grid-ink { display: none; }
  .l-doors > li,
  .l-doors:has(.door:is(:hover, :focus-visible, .is-awake)) > li,
  .l-doors > li:has(> .door:is(:hover, :focus-visible, .is-awake)),
  .is-leaving .l-doors > li:has(> .is-chosen) {
    flex-grow: var(--door-rest-grow, 1);
    transition: none;
  }
  .goth-glow,
  .goth-grain,
  .wordmark-cursor,
  .cue-arrow::before,
  .reho-head > :last-child::before,
  .reho-caret {
    animation: none;
  }
  .mini--goth img,
  .inst-device,
  .door-cta::after,
  .door::before,
  .wordmark-cursor {
    transition: none;
  }
  .door--goth:is(:hover, :focus-visible, .is-awake) .mini--goth img {
    transform: scale(1.055);
  }
}

/* Le passage gère lui-même le départ, sans redimensionner les portes. */
.is-portal-active { overflow: hidden; }
.is-portal-active body { pointer-events: none; }
.is-portal-active .l-doors > li { transition: none; will-change: transform, opacity; }
.is-portal-arriving::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: var(--portal-night);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .gothic-portal, .is-portal-arriving::before { display: none; }
}

.cue.is-selecting { color: var(--overview-accent); }
.cue-note.is-cue-muted { opacity: 0; }
.cue.is-selecting .cue-arrow { background: var(--overview-accent); }
.discovery:is(:hover, :focus-visible) { color: var(--overview-white); }
.discovery:is(:hover, :focus-visible)::before { transform: translateY(0); }
.discovery:is(:hover, :focus-visible) .discovery-detail { color: var(--overview-white); }
.discovery:is(:hover, :focus-visible) .discovery-arrow { transform: rotate(-45deg); }
.overview a:hover { color: var(--overview-accent); }
.overview .text-link:is(:hover, :focus-visible) { gap: 2.25rem; }
.overview .button-red:is(:hover, :focus-visible) { gap: 2.6rem; background: var(--overview-ink); border-color: var(--overview-ink); }
.overview :focus-visible { outline: 2px solid var(--overview-accent); outline-offset: 5px; }
.overview h2:focus { outline: none; }
#contact-form :is(input, textarea):focus { outline: none; }
#contact-form .contact-field:focus-within::after { transform: scaleX(1); }
#contact-form .contact-field > :is(input, textarea):is(:focus, :not(:placeholder-shown)) + span { transform: translateY(-2.25rem) scale(.8); }
#contact-form .contact-field:focus-within > span { color: var(--overview-accent); }
.atelier :focus-visible, .terminal-section :focus-visible { outline-color: var(--overview-white); }
.watch-section :focus-visible { outline-color: var(--overview-signal); }
.young-bridge :focus-visible { outline-color: var(--overview-accent); }
.science-stage.is-science-ready > svg { visibility: hidden; }
.science-foot button:disabled, .young-controls button:disabled { cursor: default; border-color: transparent; }
.atelier a:hover, .terminal-section a:hover { color: var(--overview-white); }
.art-stage.is-art-ready > img { visibility: hidden; }
.constellation button:is(:hover, :focus-visible, [aria-pressed='true']) { border-color: var(--overview-accent); color: var(--overview-accent); }
.constellation button[aria-pressed='true'] { background: color-mix(in srgb, var(--overview-accent) 6%, var(--overview-paper)); }
.constellation .constellation-path.is-node-active { stroke: var(--overview-accent); stroke-width: 1.25; opacity: 1; }
.constellation.is-dots-ready .constellation-orbit { display: none; }
.constellation-foot > button:is(:hover, :focus-visible) { color: var(--overview-accent); border-color: var(--overview-accent); }
.section-label.is-hacking::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: var(--overview-accent); opacity: var(--hack-cover); transform: scaleX(var(--hack-scan)); transform-origin: left; pointer-events: none; }
.proofs > .is-proof-arriving::before { opacity: 1; }
.atelier .section-label.is-hacking::after, .terminal-section .section-label.is-hacking::after, .watch-section .section-label.is-hacking::after { background: var(--overview-signal); }
.terminal-shortcuts button:is(:hover, :focus-visible) { color: var(--overview-white); border-color: var(--overview-quiet); }
.is-command-target::after { animation: command-highlight 1500ms ease-out both; }
@keyframes command-highlight { 0%, 20% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .proofs > div::before { display: none; }
  .cue, .cue-copy, .cue-note, .discovery::before, .discovery-arrow, .discovery-detail, .overview *, .overview *::before, .overview *::after { transition: none !important; animation: none !important; }
  .is-command-target::after { opacity: 1; }
}