/*
 * Abertura da página inicial: o visitante chega à porta, é recebido ("Bem-vindo. A sua mesa está pronta.")
 * e as portas abrem para a sala (o hero).
 *
 * A linha do tempo é 100% CSS (só transform/opacity), activada pela classe `intro-on` no <html>,
 * que o script inline do <head> só põe quando faz sentido (sem reduced-motion, sem #âncora, 1x por sessão).
 * Se o JS falhar, as animações terminam sozinhas e a abertura desaparece (visibility:hidden no fim).
 *
 * Linha do tempo (s):  0.2 logótipo (revelado) · 1.05 "Bem-vindo." letra a letra · 1.6 "A sua mesa…" · 2.3 centro sai
 *                      2.5→3.7 portas abrem · 3.0→4.0 hero entra · 3.9 abertura removida
 */

.intro { display: none; }

.intro-on .intro {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow: hidden;
    pointer-events: auto;
    animation: introGone 0s linear 3.9s forwards;
}

/* Portas */
.intro-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.2%;
    background:
        radial-gradient(120% 80% at 50% 50%, #3a2437 0%, transparent 70%),
        linear-gradient(180deg, #1d1019 0%, #291a28 55%, #1d1019 100%);
    will-change: transform;
}
.intro-door-left  { left: 0;  border-right: 1px solid #bea06a55; animation: introDoorLeft  1.2s cubic-bezier(.76, 0, .24, 1) 2.5s forwards; }
.intro-door-right { right: 0; border-left:  1px solid #bea06a55; animation: introDoorRight 1.2s cubic-bezier(.76, 0, .24, 1) 2.5s forwards; }

/* Centro: logótipo, filete dourado e a saudação */
.intro-center {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
    color: #fffaf3;
    padding: 24px;
    animation: introCenterOut .7s ease 2.3s forwards;
    pointer-events: none;
}
/* Logótipo: revelado da esquerda para a direita, como uma assinatura, e um brilho dourado passa uma vez pela forma */
.intro-logo-wrap {
    position: relative;
    display: block;
    width: min(230px, 56vw);
    aspect-ratio: 1768.913 / 469.797;
    clip-path: inset(0 100% 0 0);
    animation: introWipe 1.3s cubic-bezier(.65, 0, .2, 1) .2s forwards;
}
.intro-logo { display: block; width: 100%; height: auto; }
.intro-logo-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, #f0d9a6 50%, transparent 65%) no-repeat;
    background-size: 220% 100%;
    background-position: 160% 0;
    -webkit-mask: url('../images/brand/naim-horizontal-branco.svg') center / contain no-repeat;
    mask: url('../images/brand/naim-horizontal-branco.svg') center / contain no-repeat;
    mix-blend-mode: normal;
    animation: introSheen 1.2s ease-in-out 1.1s forwards;
}
.intro-rule { display: block; width: 0; height: 1px; margin: 30px 0 26px; background: linear-gradient(90deg, transparent, #bea06a, transparent); animation: introRule 1.1s cubic-bezier(.2, .7, .2, 1) .95s forwards; }
.intro-welcome {
    margin: 0;
    font-family: var(--naim-font-display, Georgia, 'Times New Roman', serif);
    font-size: clamp(38px, 6vw, 68px);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: #f3e6d3;
}
.intro-welcome span { display: inline-block; opacity: 0; animation: introLetter .9s cubic-bezier(.2, .7, .2, 1) calc(1.05s + var(--i) * .055s) forwards; }
.intro-table {
    margin: 16px 0 0;
    font-family: var(--naim-font-body, 'Segoe UI', Arial, sans-serif);
    font-size: clamp(10px, 1.3vw, 12px);
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #e1c198;
    opacity: 0;
    animation: introTracking 1.1s cubic-bezier(.2, .7, .2, 1) 1.6s forwards;
}

/* Saltar */
.intro-skip {
    position: absolute;
    z-index: 3;
    right: 24px;
    bottom: 22px;
    padding: 10px 4px;
    border: 0;
    border-bottom: 1px solid #ffffff5c;
    background: transparent;
    color: #eee1d2;
    font: 700 10px/1 var(--naim-font-body, 'Segoe UI', Arial, sans-serif);
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    animation: introFade .8s ease .8s forwards, introFadeOut .4s ease 2.3s forwards;
}
.intro-skip:hover, .intro-skip:focus-visible { color: #fff; border-bottom-color: #e1c198; }
.intro-skip:focus-visible { outline: 2px solid #e1c198; outline-offset: 4px; }

/* A sala: o hero entra devagar enquanto as portas abrem */
.intro-on .hero-image img { animation: introDolly 4.4s cubic-bezier(.2, .6, .2, 1) both; transform-origin: 62% 50%; }
.intro-on .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #1b1019;
    pointer-events: none;
    animation: introLights 1.9s ease 2.6s both;
}
.intro-on .site-header { animation: introFade .9s ease 3.4s both; }
.intro-on .hero-eyebrow   { animation: introRise .9s cubic-bezier(.2, .7, .2, 1) 3s both; }
.intro-on .hero h1        { animation: introRise 1.1s cubic-bezier(.2, .7, .2, 1) 3.15s both; }
.intro-on .hero-description { animation: introRise .9s cubic-bezier(.2, .7, .2, 1) 3.4s both; }
.intro-on .hero-actions   { animation: introRise .9s cubic-bezier(.2, .7, .2, 1) 3.55s both; }
.intro-on .hero-bottom    { animation: introFade 1s ease 3.8s both; }

/* Saltar: tudo termina já, sem cortes secos */
.intro-skip-now .intro { animation: introSkipOut .5s ease forwards; }
.intro-skip-now .intro-center, .intro-skip-now .intro-door { animation: none; }
.intro-skip-now .hero-image img,
.intro-skip-now .hero::after,
.intro-skip-now .site-header,
.intro-skip-now .hero-eyebrow,
.intro-skip-now .hero h1,
.intro-skip-now .hero-description,
.intro-skip-now .hero-actions,
.intro-skip-now .hero-bottom { animation-duration: .01s !important; animation-delay: 0s !important; }

/* Rolagem bloqueada só enquanto a abertura está visível (o JS põe e tira) */
html.intro-lock, html.intro-lock body { overflow: hidden; }

@keyframes introWipe     { to   { clip-path: inset(0 0 0 0); } }
@keyframes introSheen    { to   { background-position: -60% 0; } }
@keyframes introLetter    { from { opacity: 0; transform: translateY(.28em); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes introTracking  { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .26em; } }
@keyframes introFade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes introFadeOut   { to   { opacity: 0; } }
@keyframes introRule      { from { width: 0; } to { width: 96px; } }
@keyframes introWords     { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes introRise      { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes introCenterOut { to   { opacity: 0; transform: scale(1.06); } }
@keyframes introDoorLeft  { to   { transform: translateX(-101%); } }
@keyframes introDoorRight { to   { transform: translateX(101%); } }
@keyframes introDolly     { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes introLights    { from { opacity: .9; } to { opacity: 0; } }
@keyframes introGone      { to   { visibility: hidden; opacity: 0; pointer-events: none; } }
@keyframes introSkipOut   { to   { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Respeito por quem pede menos movimento: nada disto aparece */
@media (prefers-reduced-motion: reduce) {
    .intro { display: none !important; }
    .intro-on .hero-image img, .intro-on .hero::after, .intro-on .site-header, .intro-on .hero-eyebrow,
    .intro-on .hero h1, .intro-on .hero-description, .intro-on .hero-actions, .intro-on .hero-bottom { animation: none !important; }
    .intro-on .hero::after { display: none; }
}

@media (max-width: 760px) {
    .intro-rule { margin: 24px 0 22px; }
    .intro-skip { right: 16px; bottom: 16px; }
}