/* Catherine D. Gemstones — "A jornada de uma gema": code-driven opening.
   The approved static homepage is always rendered underneath. The opening is one
   canvas over the hero; everything it draws is produced by intro.js from the
   project's own artwork. */

.intro{display:none;position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none;background:#0b130e}
.intro-canvas{display:block;width:100%;height:100%}
.intro-pending .intro,.intro-running .intro,.intro-leaving .intro{display:block}

/* Hero chrome waits for the end of the film; intro.js drives --intro-ui (0 → 1). */
.intro-pending :is(.header,.hero-heading,.hero-link,.hero-footnote,.scroll-hint,.hero-jewel figcaption){opacity:0}
.intro-running :is(.header,.hero-heading,.hero-link,.hero-footnote,.scroll-hint,.hero-jewel figcaption){opacity:var(--intro-ui,0)}
.intro-running :is(.hero-heading,.hero-link){translate:0 calc((1 - var(--intro-ui,0)) * 14px)}

/* Early exit (skip, scroll, tap, key): the frame holds and fades away. */
.intro-leaving .intro{opacity:0!important;transition:opacity .45s ease}
.intro-leaving :is(.header,.hero-heading,.hero-link,.hero-footnote,.scroll-hint,.hero-jewel figcaption){animation:intro-in .45s ease both}
@keyframes intro-in{from{opacity:0}to{opacity:1}}

.intro-skip{position:absolute;z-index:8;bottom:40px;right:64px;min-height:44px;padding:12px 0;border:0;background:transparent;
  color:#f2edde;font:11px var(--sans);letter-spacing:.4px;cursor:pointer;opacity:.8}
.intro-skip span{padding-left:18px}
.intro-skip:hover,.intro-skip:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:5px}
.intro-skip[hidden]{display:none}

/* Demo-only replay (?demo). Never shown on ordinary visits. */
.intro-replay{position:fixed;left:16px;bottom:16px;z-index:20;min-height:40px;padding:10px 16px;border:1px solid #c0b28680;
  background:#18271dd9;color:#f2edde;font:11px var(--sans);letter-spacing:.5px;cursor:pointer;backdrop-filter:blur(6px)}
.intro-replay span{margin-right:6px}.intro-replay[hidden]{display:none}
.intro-replay{left:auto;right:16px;bottom:76px}

/* Scroll depth — "Nossa essência" and "Sob medida" (same as the journey version). */
.motion-enabled .world-background{inset:-44px 0;translate:0 var(--scene-back,0px)}
.motion-enabled .world-jaguar{translate:0 var(--scene-mid,0px)}
.motion-enabled .world-botanical{translate:0 var(--scene-front,0px)}
.motion-enabled .cad img{translate:0 var(--cad-depth,0px)}
.motion-enabled .archive-photo>img{translate:0 var(--photo-depth,0px)}
.motion-enabled [data-reveal]{transition:opacity .9s ease,translate 1.1s cubic-bezier(.2,.6,.3,1);transition-delay:calc(var(--i,0) * 110ms)}
.motion-enabled [data-reveal]:not(.is-revealed){opacity:0;translate:0 22px}

@media(max-width:700px){
  .intro-skip{right:24px;bottom:30px;font-size:12px}
  .intro-replay{left:auto;right:12px;bottom:76px}
}
@media(prefers-reduced-motion:reduce){
  .intro,.intro-skip{display:none!important}
  .motion-enabled [data-reveal]{opacity:1!important;translate:none!important;transition:none!important}
  .motion-enabled :is(.world-background,.world-botanical,.world-jaguar,.cad img,.archive-photo>img){translate:none!important}
}