/* A transparent, non-interactive introduction; all existing page styles remain scoped. */
#accueil { height: auto; min-height: 100svh; padding-top: 7.5rem; padding-bottom: 7rem; }
.intro-logo-target { width: 170px; height: 170px; margin: 0 auto 1.25rem; }
.intro-logo-target img { display: block; width: 100%; height: 100%; object-fit: contain; }
.intro-logo-target.is-revealing { visibility: hidden; }
.recyclart-intro {
    --can-width: 340px;
    position: fixed; inset: 0; z-index: 90;
    overflow: hidden; pointer-events: none; background: transparent;
    contain: layout style;
}
.recyclart-intro * { pointer-events: none !important; }
.intro-can-position {
    position: absolute; left: 50%; top: 50%; width: var(--can-width);
    aspect-ratio: 2 / 3; transform: translate(-50%, -50%);
    perspective: 1200px; z-index: 3;
}
.intro-can-travel { width: 100%; height: 100%; will-change: transform; }
.intro-can-spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.intro-can-face {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    transform: translateZ(.1px);
}
.intro-can-back { transform: rotateY(180deg) translateZ(.1px); }
.intro-reveal-position {
    position: absolute; left: 50%; top: 50%; width: min(440px, 84vw); aspect-ratio: 1;
    transform: translate(-50%, -50%); z-index: 2;
}
.intro-logo-motion { width: 100%; height: 100%; will-change: transform; }
.intro-logo-reveal { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.intro-spray {
    display: block; position: absolute; left: 50%; top: 50%; width: min(640px, 110vw);
    aspect-ratio: 1; object-fit: contain; z-index: 1; opacity: 0;
    /* Reveal only the real logo's surrounding pink, violet and blue paint. */
    mask-image: radial-gradient(circle, transparent 0 29%, #000 47%);
    -webkit-mask-image: radial-gradient(circle, transparent 0 29%, #000 47%);
}
@media (max-width: 767px) {
    .recyclart-intro { --can-width: 230px; }
    .intro-logo-target { width: 140px; height: 140px; }
}
@media (max-height: 480px) and (orientation: landscape) {
    .recyclart-intro { --can-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .recyclart-intro { display: none !important; }
    .intro-logo-target.is-revealing { visibility: visible; }
}