/* ===== Intro video — Prime Haven Market ===== */
.phi { position: fixed; inset: 0; z-index: 9999; overflow: hidden; background: #10231A; display: flex; align-items: center; justify-content: center; }
.phi.gone { opacity: 0; transition: opacity .35s ease-out; pointer-events: none; }

/* Video: phones = full screen; wide screens = full height, framed by velvet drapes */
.phi-main { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; background: #10231A; opacity: 0; transition: opacity .35s ease; }
.phi.ready .phi-main { opacity: 1; }
.phi-framed .phi-main { width: auto; height: 100%; max-width: 100%; object-fit: contain; box-shadow: 0 0 60px rgba(0,0,0,.55); }
.phi-wide .phi-main { object-fit: cover; }

/* Velvet drapes + pelmet fill the sides on wide screens (matches the curtains in the video) */
.phi-drape, .phi-pelmet { display: none; position: absolute; z-index: 1; }
.phi-framed .phi-drape, .phi-framed .phi-pelmet { display: block; }
.phi-drape { top: 0; bottom: 0; width: 50%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 72%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(90deg, #0a2a17 0, #11502b 1.6vw, #1d6b3c 2.6vw, #11502b 3.6vw, #0a2a17 4.6vw); }
.phi-drape.l { left: 0; } .phi-drape.r { right: 0; }
.phi-drape::after { content: ""; position: absolute; top: 0; bottom: 0; width: 10px; background: linear-gradient(90deg, #a8771f, #e9c46a 50%, #a8771f); }
.phi-drape.l::after { right: 0; } .phi-drape.r::after { left: 0; }
.phi-pelmet { left: 0; right: 0; top: 0; height: 9vh; z-index: 3;
  background: radial-gradient(circle at 50% 100%, transparent 62%, #0a2a17 63%) 0 100% / 7vw 3vw repeat-x, linear-gradient(180deg, #0a2a17, #145a33);
  box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.phi-pelmet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 6px; background: repeating-linear-gradient(90deg, #e9c46a 0 10px, #a8771f 10px 14px); }

.phi-skip, .phi-play { position: absolute; z-index: 5; font: 700 13px/1 var(--font-body, system-ui); color: #fff; cursor: pointer; backdrop-filter: blur(6px); }
.phi-skip { right: 18px; bottom: max(22px, env(safe-area-inset-bottom)); background: rgba(16,35,26,.55); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 10px 16px; }
.phi-skip:hover { background: rgba(16,35,26,.8); }
.phi-play { left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; font-size: 16px; padding: 16px 26px; border-radius: 999px; background: #1A5D3A; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.phi-play span { font-size: 14px; }
.phi-play[hidden] { display: none; }

/* Hero mascots (same characters as the intro) rest in the bottom corners */
.hero-peeking-dog, .hero-peeking-cat { top: auto !important; bottom: 0 !important; height: min(34%, 260px) !important; max-height: none !important; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)) !important; animation: heroPetIn .8s cubic-bezier(.3,1.4,.5,1) both; }
.hero-peeking-dog { left: 2% !important; right: auto !important; }
.hero-peeking-cat { right: 2% !important; left: auto !important; animation-delay: .1s; }
@keyframes heroPetIn { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 899px) { .hero-peeking-dog, .hero-peeking-cat { height: min(20%, 150px) !important; } .hero-peeking-dog { left: 1% !important; } .hero-peeking-cat { right: 1% !important; } }