/* =====================================================================
   ReyfynAI — one-time entry: "The Enquiry Envelope" (home page only).
   Hidden unless the inline script in index.html's <head> adds
   html.has-entry (first visit, no reduced-motion, not an internal arrival).
   Choreography lives in assets/js/entry.js.
===================================================================== */

.entry{ display:none; }
html.has-entry .entry{ display:block; }
html.has-entry, html.has-entry body{ overflow:hidden; }

.entry:focus{ outline:none; }
.entry{
  position:fixed; inset:0; z-index:1000; overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 46%, #F8F2E4 0%, #EFE6D0 55%, #E3D6B6 100%);
  color:var(--text-primary);
}

/* ---- the void: slow warm haze + a little gold dust (transform/opacity only) ---- */
.haze{ position:absolute; border-radius:50%; opacity:0; pointer-events:none; will-change:transform; }
.haze-1{ width:70vmax; height:70vmax; left:-22vmax; top:-28vmax;
  background:radial-gradient(circle, rgba(198,161,91,.24), transparent 62%); animation:haze-a 24s ease-in-out infinite alternate; }
.haze-2{ width:62vmax; height:62vmax; right:-20vmax; bottom:-26vmax;
  background:radial-gradient(circle, rgba(62,76,54,.15), transparent 62%); animation:haze-b 28s ease-in-out infinite alternate; }
.haze-3{ width:52vmax; height:52vmax; left:50%; top:46%; margin:-26vmax 0 0 -26vmax;
  background:radial-gradient(circle, rgba(255,255,255,.6), transparent 60%); animation:haze-c 18s ease-in-out infinite alternate; }
@keyframes haze-a{ to{ transform:translate3d(7vmax,5vmax,0); } }
@keyframes haze-b{ to{ transform:translate3d(-6vmax,-5vmax,0); } }
@keyframes haze-c{ to{ transform:scale(1.12); } }

.dust{ position:absolute; inset:0; pointer-events:none; }
.dust i{ position:absolute; border-radius:50%; background:var(--gold); opacity:0; animation:dust 11s linear infinite; }
@keyframes dust{ 0%{ opacity:0; transform:translateY(0); } 20%{ opacity:.65; } 100%{ opacity:0; transform:translateY(-140px); } }

/* ---- chrome ---- */
.entry-brand{ position:absolute; top:22px; left:24px; z-index:10; }
.entry-skip{
  position:absolute; top:22px; right:24px; z-index:10;
  font:600 12px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--sage);
  background:transparent; border:1px solid var(--bg-panel-border); padding:10px 14px; border-radius:6px; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
@media (hover:hover) and (pointer:fine){ .entry-skip:hover{ border-color:var(--sage); background:rgba(62,76,54,.05); } }

/* ---- stage ---- */
.stage{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:30px; padding:72px 16px 40px;
}
.chip{
  display:inline-flex; align-items:center; gap:10px; padding:9px 15px; border-radius:999px;
  border:1px solid var(--bg-panel-border); background:rgba(255,255,255,.72);
  font:600 11.5px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--sage);
  opacity:0;
}
.chip .dot{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.chip .dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--gold); animation:chip-ping 2s ease-out infinite; }
@keyframes chip-ping{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(3.2); opacity:0; } }

.prompt{
  display:flex; align-items:center; gap:14px; opacity:0;
  font:600 12px/1 var(--font-body); letter-spacing:.22em; text-transform:uppercase; color:var(--sage);
}
.prompt .pl{ width:34px; height:1px; background:var(--gold); }
.prompt .pt{ animation:prompt-breathe 2.6s ease-in-out infinite; }
@keyframes prompt-breathe{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* ---- envelope (sized from one variable so it scales on phones) ---- */
.env{ --w:min(420px, 84vw); position:relative; width:var(--w); height:calc(var(--w) * .6667); perspective:900px; opacity:0; }
.env > svg{ position:absolute; display:block; }
.env .back{ inset:0; width:100%; height:100%; z-index:1; }
.env .pocket{ inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.env .shadow{ position:absolute; left:6%; right:6%; bottom:-30px; height:30px; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(43,42,36,.30), transparent 70%); }

.flap{ position:absolute; left:0; top:0; width:100%; height:53.6%; z-index:4; transform-origin:50% 0; transform-style:preserve-3d; pointer-events:none; }
.flap svg{ position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden; }
.flap .liner{ transform:rotateY(180deg); }

.seal{ position:absolute; left:50%; top:53.6%; z-index:6; width:calc(var(--w) * .15); aspect-ratio:1;
  margin:calc(var(--w) * -.075) 0 0 calc(var(--w) * -.075); pointer-events:none; filter:drop-shadow(0 3px 5px rgba(43,42,36,.30)); }
.seal-half{ position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #F0DFB3, #C6A15B 52%, #9F7D3C 100%); }
.seal-half::before{ content:""; position:absolute; inset:5%; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28); }
.seal-half .core{ position:absolute; inset:24%; border-radius:50%; background:var(--sage); display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px rgba(225,203,156,.55); }
.seal-half .core img{ width:64%; height:auto; display:block; }
.seal-l{ clip-path:polygon(0 0, 54% 0, 46% 30%, 56% 55%, 47% 78%, 52% 100%, 0 100%); }
.seal-r{ clip-path:polygon(54% 0, 100% 0, 100% 100%, 52% 100%, 47% 78%, 56% 55%, 46% 30%); }

.sparks{ position:absolute; left:50%; top:53.6%; z-index:7; width:0; height:0; pointer-events:none; }
.sparks i{ position:absolute; left:-2px; top:-2px; width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:0; }

.hit{ position:absolute; inset:-14px; z-index:10; background:none; border:0; border-radius:14px; cursor:pointer; }
.hit:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---- the card that slides out (natural size; GSAP scales it to fit the envelope) ---- */
.card{
  position:absolute; left:50%; bottom:calc(var(--w) * .03); z-index:2; width:330px;
  background:#FFFDF8; border:1px solid rgba(62,76,54,.14); border-radius:10px; padding:20px 22px 22px;
  box-shadow:0 12px 30px rgba(43,42,36,.14); transform-origin:50% 100%; text-align:left;
}
.c-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;
  font:600 10.5px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; }
.c-eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--sage); }
.c-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.c-time{ color:var(--text-muted); }
.c-name{ font:600 21px/1.15 var(--font-display); color:var(--text-primary); }
.c-meta{ margin-top:4px; font:500 11.5px/1.4 var(--font-body); color:var(--text-secondary); }
.c-msg{ margin-top:12px; font:400 13px/1.55 var(--font-body); color:var(--text-primary); }
.c-reply{ position:relative; margin-top:16px; padding:14px 0 30px; border-top:1px solid rgba(62,76,54,.14); }
.c-reply-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;
  font:600 10.5px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--sage); }
.c-timer{ font-variant-numeric:tabular-nums; color:var(--gold); letter-spacing:.08em; }
.c-reply-body{ display:grid; font:400 13px/1.55 var(--font-body); color:var(--text-primary); }
.c-reply-body > *{ grid-area:1 / 1; }
.c-reply-body .ghost{ visibility:hidden; }
.stamp{
  position:absolute; right:-4px; bottom:-4px; padding:7px 12px; border:1.5px solid #9F7D3C; border-radius:6px; background:rgba(255,253,248,.92);
  font:600 12px/1 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:#8A6B2C; white-space:nowrap; opacity:0;
}

@media (max-width:480px){
  .stage{ gap:24px; }
  .entry-brand .logo{ font-size:18px; }
}