/* =================================================================
   PORTA MÁGICA — magic-door component (SITE build, REAL ART)
   Rodízio & Diversão. Uses the client's own door artwork
   (assets/door/door-{left,right}.webp) split into two leaves that
   swing open to reveal a real photo/video. Portable: scoped under
   .magic-door, self-contained tokens. Pair with door.js.
   ================================================================= */
:root{
  --gold:#FFD23F; --gold-deep:#C9920E; --gold-light:#FFE9A0;
  --cyan:#46ECFF; --magenta:#FF5CE1; --purple:#B36BFF; --green:#3DF5A6;
  --door-w: 320px;       /* max width of one door (gallery cell)     */
  --door-ar: 1.3;        /* PORTRAIT opening (matches portrait media) */
}

/* BIG video windows: 1 per row on phones (~94vw), up to 3 on desktop */
.door-row{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(40px,7vw,64px); margin:clamp(30px,5vw,52px) auto 0; max-width:1240px; }
.door-row .door-block{ width:min(460px,94vw); }

/* photo gallery: BIG (1 per row) on phones, 2 on tablets, 3 on desktop = 3+3 */
.door-gallery{
  display:grid; gap:clamp(40px,7vw,60px);
  grid-template-columns:1fr;
  max-width:1160px; margin:clamp(30px,5vw,52px) auto 0;
}
@media (min-width:560px){ .door-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:880px){ .door-gallery{ grid-template-columns:repeat(3,1fr); } }

.door-block{ width:100%; margin:0 auto; }
.door-caption{
  margin-top:26px; text-align:center;
  font-family:"Cinzel Decorative",serif; font-weight:700;
  font-size:clamp(1rem,3.6vw,1.25rem); color:#fff; letter-spacing:.01em;
  text-shadow:0 0 16px rgba(255,210,63,.45), 0 2px 8px rgba(0,0,0,.65);
}

/* =================================================================
   THE DOOR
   ================================================================= */
.magic-door{
  position:relative;
  width:100%; margin-inline:auto;            /* fills its .door-block cell */
  aspect-ratio: 1 / var(--door-ar);
  perspective: 1100px;
  perspective-origin:50% 46%;
  isolation:isolate;
  cursor:pointer;
  user-select:none; -webkit-tap-highlight-color:transparent;
}

/* warm glow under the door, blooms when open */
.magic-door::after{
  content:""; position:absolute; left:50%; bottom:-4%;
  width:74%; height:12%; transform:translateX(-50%);
  background:radial-gradient(50% 100% at 50% 50%, rgba(255,180,60,.55), transparent 72%);
  filter:blur(10px); opacity:0; z-index:0; pointer-events:none;
  transition:opacity .6s ease;
}
.magic-door.is-open::after{ opacity:.9; }

/* ---------- MEDIA behind the leaves ---------- */
.door-media{
  position:absolute; inset:5% 5% 6%;
  z-index:1; overflow:hidden;
  border-radius:46% 46% 8% 8% / 34% 34% 4% 4%;   /* arched doorway */
  /* magical portal backdrop so contain-letterbox bars read as intentional */
  background:radial-gradient(80% 80% at 50% 40%, #241a3e 0%, #0a0716 78%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.6);
  transform:scale(.9); opacity:0;
  transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
/* The media shows FULLY (contain = never cropped/cut), centered, ON TOP of a
   blurred-zoomed copy of itself that fills the doorway. Uniform window size,
   no black strips, nothing cut — handles any photo/video aspect identically. */
/* the sharp photo gets its OWN GPU layer (translateZ) so it always composites
   ABOVE the blurred fill — without it, some GPUs painted the blur on top
   ("sem imagens": only the blurred blob showed). */
.door-media video, .door-media img{ position:relative; z-index:2; width:100%; height:100%; object-fit:contain; display:block; transform:translateZ(0); }
.door-bgfill{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  filter:blur(22px) brightness(.82) saturate(1.35); transform:scale(1.18) translateZ(0); transition:background-image .9s ease; }

/* SLIDESHOW door (e.g. the cardápio): multiple food photos crossfade */
.door-media[data-slideshow] .dslide{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  z-index:2; opacity:0; transition:opacity .9s ease; transform:translateZ(0); }
.door-media[data-slideshow] .dslide.on{ opacity:1; }
.door-media::before{                          /* warm rim around the opening */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(255,210,63,.5), inset 0 0 40px rgba(255,196,90,.35);
  mix-blend-mode:screen;
}
.magic-door.is-open .door-media{ transform:scale(1); opacity:1; }

/* light spilling out of the doorway when open */
.door-glow{
  position:absolute; inset:6% 6% 7%; z-index:2; pointer-events:none;
  border-radius:46% 46% 8% 8% / 34% 34% 4% 4%;
  background:radial-gradient(58% 58% at 50% 46%, rgba(255,228,150,0), transparent 70%);
  opacity:0; mix-blend-mode:screen; will-change:opacity;
}

/* ---------- THE TWO LEAVES = the client's door art, split ---------- */
/* perspective (NOT bare preserve-3d) so the closed leaf's front face renders
   reliably on hardware GPUs — preserve-3d without perspective culled the leaves
   on some browsers ("sem janelas"), even though it rendered in headless. */
.door-leaves{ position:absolute; inset:0; z-index:3; perspective:1400px; pointer-events:none; }
.door-leaf{
  position:absolute; top:0; bottom:0; width:50.8%;     /* slight overlap = no gap */
  background-repeat:no-repeat; background-size:cover;
  will-change:transform; backface-visibility:hidden;
  transition:transform 1.5s cubic-bezier(.22,.65,.25,1);  /* slow, gentle door swing */
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.door-leaf.is-left{
  left:0; transform-origin:left center;
  background-image:url("assets/door/door-left.webp"); background-position:left center;
  transform:rotateY(0deg);
}
.door-leaf.is-right{
  right:0; transform-origin:right center;
  background-image:url("assets/door/door-right.webp"); background-position:right center;
  transform:rotateY(0deg);
}
.magic-door.is-open .door-leaf.is-left{  transform:rotateY(-112deg); }
.magic-door.is-open .door-leaf.is-right{ transform:rotateY(112deg); }

/* a pulsing magic glow over the keyhole while CLOSED — invites the tap */
.door-key{
  position:absolute; left:50%; top:42%; width:26%; aspect-ratio:1; z-index:4;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(255,214,120,.85) 0%, rgba(255,180,60,.35) 40%, transparent 70%);
  mix-blend-mode:screen; filter:blur(2px);
  animation:keyPulse 2.4s ease-in-out infinite;
}
@keyframes keyPulse{ 0%,100%{opacity:.45; transform:translate(-50%,-50%) scale(.9)} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.12)} }
.magic-door.is-open .door-key{ opacity:0; animation:none; transition:opacity .3s ease; }

/* ---------- SPARKLE BURST (lazy, on first open) ---------- */
.door-sparks{ position:absolute; inset:0; z-index:5; pointer-events:none; overflow:visible; }
.door-spark{
  position:absolute; left:50%; top:46%; width:var(--sz,8px); height:var(--sz,8px); border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--c,#FFD23F) 45%, transparent 72%);
  opacity:0; will-change:transform,opacity; mix-blend-mode:screen; filter:drop-shadow(0 0 6px var(--c,#FFD23F));
}

/* ---------- "toque para abrir" hint — INSIDE the door, no overlap ---------- */
.door-hint{
  position:absolute; left:50%; bottom:9%; z-index:7; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.45em; white-space:nowrap;
  padding:.5em 1.05em; border:1px solid rgba(255,228,150,.6); border-radius:999px;
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:clamp(.72rem,2.4vw,.86rem);
  color:#1a0f02; background:linear-gradient(180deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6);
  pointer-events:none; transition:opacity .4s ease; animation:hintBob 2.2s ease-in-out infinite;
}
@keyframes hintBob{ 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-4px)} }
.magic-door.is-open .door-hint{ opacity:0; animation:none; }

/* =================================================================
   REDUCED MOTION — render OPEN immediately, no animation
   ================================================================= */
@media (prefers-reduced-motion: reduce){
  .magic-door .door-media{ transform:scale(1); opacity:1; transition:none; }
  .magic-door .door-leaf{ transition:none; }
  .magic-door .door-leaf.is-left{  transform:rotateY(-112deg); }
  .magic-door .door-leaf.is-right{ transform:rotateY(112deg); }
  .magic-door .door-key{ display:none; }
  .magic-door::after{ opacity:.9; }
}