/* Silkedits — shared design-system styles (Midnight Violet).
   Pairs with assets/theme.js. Used by the client portal pages. */

:root { color-scheme: dark; --accent:#7C5CFF; --accent2:#9B86FF; --cyan:#3BE0E0; --ease:cubic-bezier(.16,1,.3,1);
  --sf-display:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",Arial,sans-serif;
  --sf-text:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",Arial,sans-serif; }
html { scroll-behavior: smooth; overflow-x:clip; }
body { background:#08070D; color:#F4F2FB; font-family:var(--sf-text); -webkit-font-smoothing:antialiased; overflow-x:clip; }

.font-display { font-family:var(--sf-display); font-weight:600; letter-spacing:-.025em; }
.font-mono { font-family:var(--sf-text); }
.serif { font-family:var(--sf-display); font-style:italic; letter-spacing:-.015em; }
.grad-text { background:linear-gradient(105deg,#C9BCFF 0%,#7C5CFF 48%,#9B86FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

::selection { background:rgba(124,92,255,.35); color:#fff; }
:focus-visible { outline:2px solid #7C5CFF; outline-offset:3px; border-radius:8px; }

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#08070D; }
::-webkit-scrollbar-thumb { background:rgba(124,92,255,.45); border-radius:999px; border:3px solid #08070D; }

.container-x { margin-inline:auto; width:100%; max-width:80rem; padding-inline:1.25rem; }
@media (min-width:640px){ .container-x{ padding-inline:2rem; } }
@media (min-width:1024px){ .container-x{ padding-inline:3rem; } }

/* ---------- cinematic silk background (injected by assets/portal-bg.js) ---------- */
#bg { position:fixed; inset:0; z-index:-1; pointer-events:none; background:#08070D; }
#silk { position:absolute; inset:0; width:100%; height:100%; display:block; }
.bg-veil { position:absolute; inset:0;
  background:radial-gradient(135% 115% at 50% 0%, rgba(8,7,13,.34) 0%, rgba(8,7,13,.66) 46%, rgba(8,7,13,.92) 100%); }
.bg-grain { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- glass ---------- */
.glass { background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1); }

/* ---------- eyebrow pill ---------- */
.eyebrow { display:inline-flex; align-items:center; gap:.6rem; padding:.42rem .9rem; border-radius:999px; border:1px solid rgba(124,92,255,.28); background:rgba(124,92,255,.08); font-family:var(--sf-text); font-size:.66rem; font-weight:500; text-transform:uppercase; letter-spacing:.22em; color:#B9A8FF; }

/* REC indicator dot (cyan) */
.rec-dot, .recdot { width:.45rem; height:.45rem; border-radius:999px; background:#3BE0E0; box-shadow:0 0 0 0 rgba(59,224,224,.6); animation:rec 2s ease-out infinite; }
@keyframes rec { 0%{box-shadow:0 0 0 0 rgba(59,224,224,.55)} 70%{box-shadow:0 0 0 6px rgba(59,224,224,0)} 100%{box-shadow:0 0 0 0 rgba(59,224,224,0)} }

/* Viewfinder corner brackets — signature framing motif (violet) */
.viewfinder { position:relative; }
.viewfinder::before, .viewfinder::after { content:""; position:absolute; width:20px; height:20px; border:2px solid #7C5CFF; pointer-events:none; z-index:3; }
.viewfinder::before { top:12px; left:12px; border-right:0; border-bottom:0; }
.viewfinder::after { bottom:12px; right:12px; border-left:0; border-top:0; }

@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulsering { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.8);opacity:0} }
.marquee-track { animation:marquee 40s linear infinite; }
.floaty { animation:float 7s ease-in-out infinite; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity:1; transform:none; }

.drawer { transform:translateX(-100%); transition:transform .35s cubic-bezier(.22,1,.36,1); }
.drawer.open { transform:translateX(0); }
.scrim { opacity:0; pointer-events:none; transition:opacity .3s ease; }
.scrim.open { opacity:1; pointer-events:auto; }

.acc-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.22,1,.36,1); }
.acc-panel.open { grid-template-rows:1fr; }
.acc-panel > div { overflow:hidden; }

.timeline-line { transform:scaleX(0); transform-origin:left; transition:transform 1.4s cubic-bezier(.22,1,.36,1); }
.timeline-line.in { transform:scaleX(1); }
.timeline-line-v { transform:scaleY(0); transform-origin:top; transition:transform 1.6s cubic-bezier(.22,1,.36,1); }
.timeline-line-v.in { transform:scaleY(1); }

/* Form fields (violet) */
.field { width:100%; border-radius:.9rem; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); padding:.82rem 1rem; color:#F4F2FB; outline:none; transition:border-color .2s, box-shadow .2s, background .2s; }
.field::placeholder { color:rgba(146,141,166,.6); }
.field:hover { border-color:rgba(255,255,255,.18); }
.field:focus { border-color:rgba(124,92,255,.7); background:rgba(124,92,255,.06); box-shadow:0 0 0 4px rgba(124,92,255,.16); }
select.field { appearance:none; }
select.field option { background:#181527; color:#F4F2FB; }
.field-label { display:block; margin-bottom:.5rem; font-family:var(--sf-text); font-size:12px; font-weight:500; letter-spacing:.01em; color:#C7C3D6; text-transform:none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1 !important; transform:none !important; }
  .rec-dot, .recdot { animation:none !important; }
}