/* =========================================================
   PORTÃO DE ENTRADA: a arte "Seja livre" dividida em duas folhas.
   Arrastar (qualquer direção), rolar, teclado ou clique abrem e revelam o hero.

   Regra de ouro: as duas folhas têm o MESMO tamanho e o MESMO
   background-size: cover. É isso que mantém o recorte alinhado pixel a pixel.

   Só aparece com JavaScript ativo (html.js). Sem JS, ou para robôs que não
   executam scripts, o conteúdo fica acessível direto.
   ========================================================= */
@layer components {
  .gate { display: none; }
  html.js .gate {
    display: block;
    position: fixed; inset: 0; z-index: var(--z-gate);
    perspective: 1600px; overflow: hidden;
    cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
  }
  /* já aberto nesta sessão: nem pinta (decidido no <head>, antes do 1º frame) */
  html.gate-skip .gate { display: none; }
  html.js .gate.is-dragging { cursor: grabbing; }
  html.js .gate[hidden] { display: none; }

  .door { position: absolute; inset: 0; will-change: transform, opacity; backface-visibility: hidden; }
  .door--left  { transform-origin: 0% 50%;   z-index: 2; }
  .door--right { transform-origin: 100% 50%; z-index: 1; }
  .door__img, .door__shadow { position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; background-position: center; }
  .door__shadow { opacity: 0; will-change: opacity; }

  .door--left  .door__img { background-image: url(../../img/leaf-left-1600.webp); }
  .door--right .door__img { background-image: url(../../img/leaf-right-1600.webp); }
  .door--left  .door__shadow { background-image: url(../../img/leaf-left-shadow.webp);  transform: translateX(1.2%); }
  .door--right .door__shadow { background-image: url(../../img/leaf-right-shadow.webp); transform: translateX(-1.2%); }

  @media (min-width: 1601px) {
    .door--left  .door__img { background-image: url(../../img/leaf-left-2560.webp); }
    .door--right .door__img { background-image: url(../../img/leaf-right-2560.webp); }
  }
  /* telas em pé: arte vertical própria (1080×2340), ancorada embaixo para o logo não ficar sob o botão */
  @media (max-aspect-ratio: 1/1) {
    .door__img, .door__shadow { background-position: center bottom; }
    .door--left  .door__img    { background-image: url(../../img/leaf-left-mobile.webp); }
    .door--right .door__img    { background-image: url(../../img/leaf-right-mobile.webp); }
    .door--left  .door__shadow { background-image: url(../../img/leaf-left-mobile-shadow.webp); }
    .door--right .door__shadow { background-image: url(../../img/leaf-right-mobile-shadow.webp); }
  }

  /* ---------- Botão "Arraste para abrir" ---------- */
  .gate__hint {
    position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); z-index: 3;
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 14px;
    padding: 12px 22px; min-height: 44px; border-radius: var(--radius-pill);
    border: 1px solid rgba(240, 234, 220, .35);
    background: rgba(34, 63, 49, .55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: var(--c-cream); white-space: nowrap;
    font-family: var(--ff-display); font-size: 15px; letter-spacing: .28em; text-transform: uppercase;
    transition: opacity .4s ease;
  }
  .gate__hint:focus-visible { outline: 2px solid var(--c-cream); outline-offset: 4px; }
  .gate__chev { display: inline-block; font-family: var(--ff-sans); letter-spacing: 0; font-size: 18px; line-height: 1; }
  .gate__chev--l { animation: gate-nudge-l 1.8s var(--ease-out) infinite; }
  .gate__chev--r { animation: gate-nudge-r 1.8s var(--ease-out) infinite; }
  @keyframes gate-nudge-l { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(-6px); } }
  @keyframes gate-nudge-r { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(6px); } }
  .gate.is-touched .gate__hint { opacity: 0; pointer-events: none; }

  @media (max-width: 760px) { .gate__hint { font-size: 13px; letter-spacing: .2em; } }
  @media (prefers-reduced-motion: reduce) { .gate__chev { animation: none; } }
}