/* ===== Hero Hub — CLEAN RESET (v3.5.1) =============================== */
@import "./SpectrogramRibbon.css";
@import "./RibbonAtmosphere.css";
@import "./InfoPane.css";

/* ===== BFCACHE RESTORATION GUARD ===================================== */

/* Disable transitions during bfcache restoration to prevent flicker */
html[data-restoring] *,
html[data-restoring] *::before,
html[data-restoring] *::after {
  transition: none !important;
  animation: none !important;
}

:root{
  --T-Micro:120ms; --T-Hover:240ms; --T-Enter:600ms;
  --T-CurtainIn:400ms;
  --Ease-Major:cubic-bezier(.22,1,.36,1);
  --Color-Text:#e7e7e7; --Color-Accent:#9a66ff; --Color-Bg:#050505;
  --sig-overlay: 80;

  /* VideoVerse image fit: 'cover' = full-bleed crop, 'contain' = full image */
  --vv-fit: contain;
}

#SigOverlayRoot {
  position: fixed;
  inset: 0;
  pointer-events: none;
  isolation: isolate;       /* own stacking context */
  z-index: 900;             /* > Panel--Entering (z:30), < .OverlayFade (z:999) */
}

@media (prefers-reduced-motion: reduce){
  :root{ --T-Enter:0ms; --T-Hover:0ms; --T-CurtainIn:0ms; }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:#050505; color:var(--Color-Text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  height:100dvh; overflow:hidden;
}

/* ===== Panels ======================================================== */

.Hero{ position:relative; width:100%; height:100dvh; }
.Panels{ position:relative; width:100%; height:100%; isolation:isolate; }

.Panel{
  position:absolute; inset:0; cursor:pointer; outline:none; overflow:hidden;
  background:#0a0a0d;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  transition:box-shadow 60ms linear;
  display:flex; align-items:flex-end; justify-content:flex-start;
  contain:paint;
  will-change:clip-path;
}
.Panel::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.22);
  opacity:0;
  pointer-events:none;
  transition:opacity 60ms linear;
  z-index:20;
}
.Panel[data-state="idle"]::before{ opacity:.18; }
.Panel:hover::before,.Panel[data-active="1"]::before{ opacity:0; }
.Panel:focus-visible{ box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--Color-Accent); }

.PanelInner{ position:absolute; inset:0; overflow:hidden; }

/* Desktop diagonals (equal thirds) */
.Panel--Groove       { clip-path:polygon(0% 0%, 33.5% 0%, 30% 100%, 0% 100%); }
.Panel--TriangleRain { clip-path:polygon(33.5% 0%, 66.7% 0%, 63% 100%, 30% 100%); }
.Panel--Video        { clip-path:polygon(66.7% 0%, 100% 0%, 100% 100%, 63% 100%); }

/* Accent tokens per panel */
.Panel--Groove       { --accent: #a855f7; }
.Panel--TriangleRain { --accent: #28f06a; }
.Panel--Video        { --accent: #ff40c0; }

/* Badge anchors (desktop) — centered in each wedge */
.Panel--Groove       { --badge-left: 16.75%; --badge-top: 20px; --badge-xform: translateX(-50%); }
.Panel--TriangleRain { --badge-left: 50%; --badge-top: 20px; --badge-xform: translateX(-50%); }
.Panel--Video        { --badge-left: 83.25%; --badge-top: 20px; --badge-xform: translateX(-50%); }

/* Hover ring */
.Panel:hover::after,.Panel[data-active="1"]::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px #ffffff18, 0 0 0 1px #ffffff05;
  pointer-events:none;
  z-index:30;
}

/* Enter morph to full-rect */
.Panel--Entering{ animation:PanelExpand var(--T-Enter) var(--Ease-Major) forwards; z-index:30; }
.Panels.Dim .Panel:not(.Panel--Entering){ filter:brightness(.25) grayscale(.3); transition:filter var(--T-Micro) linear; }
@keyframes PanelExpand{ to{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); } }

/* Canvas containment for TriangleRain panel */
.Panel--TriangleRain canvas{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  clip-path:inherit !important;
  pointer-events:none;
}

/* Mobile: stacked angled rows */
@media (max-width:768px){
  .Panel--Groove       { clip-path:polygon(0 0,100% 0,100% 33%,0 34%); }
  .Panel--TriangleRain { clip-path:polygon(0 34%,100% 33%,100% 66%,0 67%); }
  .Panel--Video        { clip-path:polygon(0 67%,100% 66%,100% 100%,0 100%); }
  .Panel--Entering{ animation:PanelExpandMobile var(--T-Enter) var(--Ease-Major) forwards; }
  @keyframes PanelExpandMobile{ to{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); } }
  
  /* Mobile badge positions — centered in each horizontal band */
  .Panel--Groove       { --badge-left: 50%; --badge-top: 12px; --badge-xform: translateX(-50%); }
  .Panel--TriangleRain { --badge-left: 50%; --badge-top: calc(34% + 12px); --badge-xform: translateX(-50%); }
  .Panel--Video        { --badge-left: 50%; --badge-top: calc(67% + 12px); --badge-xform: translateX(-50%); }
}

/* ===== Utility overlays (kept) ====================================== */

.Scanlines{ position:absolute; inset:0; background:repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 2px); mix-blend-mode:overlay; pointer-events:none; opacity:0 }
.Scanlines.On{ opacity:.35; transition:opacity var(--T-Micro) linear }

/* Slice Canvas */
.SliceCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.Panel--TriangleRain { 
  overflow: hidden;
}
@keyframes RGBSplit{ 0%{filter:none} 50%{ filter: drop-shadow(1px 0 red) drop-shadow(-1px 0 cyan) saturate(1.2) contrast(1.1) } 100%{filter:none} }
.Grain{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:.12;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.55"/></svg>');
  background-size:120px 120px;
}
.RGBPlay{ animation:RGBSplit 1000ms var(--Ease-Major) infinite; }
.DevOverlay{ position:fixed; bottom:8px; right:10px; font:12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#000a; color:#8cf; padding:6px 8px; border-radius:8px; border:1px solid #235; z-index:50; }
.OverlayFade{ position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; z-index:999 }
.OverlayFade.Show{ opacity:.85; transition:opacity var(--T-Micro) linear }

/* Hub → TriangleRain black curtain handoff */
#HubCurtain{
  position:fixed; inset:0; background:#000; opacity:0; pointer-events:none;
  z-index:1200; /* above OverlayFade (999) and InfoPane (950) */
  transition:opacity var(--T-CurtainIn) linear;
}
#HubCurtain.active{ opacity:1; }

/* Triangle Rain unlock modal (server-side gate) */
.TrUnlockBackdrop{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.65);
  z-index:1100; /* below HubCurtain (1200), above InfoPane */
  padding:16px;
}
.TrUnlockBackdrop.is-open{ display:grid; }
.TrUnlockModal{
  width:min(520px, calc(100vw - 32px));
  border:1px solid rgba(0,255,120,.28);
  border-radius:16px;
  background:rgba(8,18,10,.88);
  box-shadow:0 32px 80px rgba(0,0,0,.6);
  overflow:hidden;
}
.TrUnlockHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 12px;
  background:linear-gradient(180deg, rgba(0,255,120,.06) 0%, rgba(0,0,0,0) 100%);
}
.TrUnlockTitle{ font-size:15px; letter-spacing:.3px; color:#98ffc8; text-shadow:0 0 10px rgba(0,255,120,.35); }
.TrUnlockClose{
  width:32px;
  height:32px;
  border:1px solid rgba(0,255,120,.28);
  background:rgba(10,30,14,.6);
  color:#caffea;
  border-radius:10px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.TrUnlockClose:hover{ background:rgba(16,52,26,.8); border-color:rgba(0,255,120,.45); }
.TrUnlockBody{ padding:14px; }
.TrUnlockCopy{ color:rgba(190,255,210,.82); margin-bottom:12px; line-height:1.35; }
.TrUnlockForm{ display:flex; gap:10px; align-items:center; }
.TrUnlockInput{
  flex:1;
  height:42px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(0,255,120,.42);
  background:rgba(12,36,18,.9);
  color:#d6ffe6;
  outline:none;
}
.TrUnlockInput::placeholder{ color:rgba(190,255,210,.45); }
.TrUnlockInput:focus{ border-color:rgba(0,255,120,.7); box-shadow:0 0 0 3px rgba(0,255,120,.18), 0 0 12px rgba(0,255,120,.2); }
.TrUnlockSubmit{
  height:42px;
  padding:0 16px;
  border-radius:12px;
  border:1px solid rgba(0,255,120,.38);
  background:rgba(10,30,14,.78);
  color:#caffea;
  font-weight:500;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(0,0,0,.4);
  transition:background .15s, box-shadow .15s, border-color .15s;
}
.TrUnlockSubmit:hover:not(:disabled){ background:rgba(16,52,26,.92); border-color:rgba(0,255,120,.55); box-shadow:0 16px 32px rgba(0,0,0,.5), 0 0 12px rgba(0,255,120,.15); }
.TrUnlockSubmit:active:not(:disabled){ transform:translateY(1px); }
.TrUnlockSubmit:disabled{ opacity:.55; cursor:default; }
.TrUnlockError{ margin-top:10px; min-height:20px; color:#ff9090; font-size:14px; }
.TrUnlockHint{ margin-top:10px; }
.TrUnlockGateLink{ color:rgba(0,255,120,.85); text-decoration:none; font-size:12px; transition:text-shadow .15s; }
.TrUnlockGateLink:hover{ text-decoration:underline; text-shadow:0 0 8px rgba(0,255,120,.4); }

/* ===== VideoVerse — canonical =====
DOM:
.Panel--Video > .PanelInner > .VVStack
  > .VVThumb * 3 > .VVInner > img
*/

/* Stage backdrop lives behind VVStack inside the panel */
#VVStageBackdrop{
  position:absolute; inset:0; z-index:0;
  background:#0a0a0d;                /* safe default */
  background-size:cover; background-position:center;
  filter:blur(12px) brightness(.55) saturate(.9);
  opacity:0; transition:opacity var(--T-Micro) linear;
  will-change:transform, opacity;
}
#VVStageBackdrop.Show{ opacity:1; }
/* Gentle parallax drift during enter */
#VVStageBackdrop.Parallax{
  transform:translateX(-1.5%) scale(1.03);
  transition:transform var(--T-Enter) var(--Ease-Major), opacity var(--T-Micro) linear;
}
@media (prefers-reduced-motion: reduce){
  #VVStageBackdrop, #VVStageBackdrop.Parallax{ transform:none; transition:none; }
}

/* Geometry variables */
.Panel--Video{
  --vv-left: 63%;     /* desktop: start at polygon's min left */
  --vv-top: 0;        /* desktop: full height */
  --vv-fit: cover;    /* full-bleed thumbnails */
}

/* Mobile: bottom band (matches polygon top 66%..67%) */
@media (max-width:768px){
  .Panel--Video{ --vv-left: 0; --vv-top: 66%; }
}

/* Stack fills the wedge rect exactly */
.Panel--Video .VVStack{
  position:absolute;
  top:var(--vv-top); bottom:0; right:0; left:var(--vv-left);
  display:flex; flex-direction:column; overflow:hidden; z-index:1;
}

/* Three equal rows (flex is enough; no absolute layering) */
.Panel--Video .VVStack > .VVThumb{
  flex:1 0 33.333%;
  min-height:0;
  overflow:hidden;
}

/* Simple inner wrapper */
.Panel--Video .VVThumb > .VVInner{
  position:relative; width:100%; height:100%;
}

/* Full-bleed media; crop controlled by --vv-fit */
.Panel--Video .VVThumb img,
.Panel--Video .VVThumb video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:var(--vv-fit);
  object-position:center;
  pointer-events:none;
}

/* ===== Slice Action Chips ============================================ */
.slice-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--accent);
  background: rgba(16, 16, 24, 0.75);
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px currentColor;
  box-shadow: 0 0 20px rgba(0,0,0,0.4), 0 0 30px color-mix(in srgb, var(--accent) 20%, transparent);
  pointer-events: auto;
  cursor: pointer;
  z-index: 10;
  transition: transform 180ms cubic-bezier(.22,1,.36,1),
              box-shadow 180ms cubic-bezier(.22,1,.36,1);
}

.slice-chip svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Hover glow enhancement */
.Panel:hover .slice-chip,
.Panel[data-active="1"] .slice-chip {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 0 24px rgba(0,0,0,0.3), 0 0 40px color-mix(in srgb, var(--accent) 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .slice-chip { transition: none; }
}