/* DigiMason Dark v2 — custom layer on top of Tailwind CDN */

:root{
  --grad: linear-gradient(120deg,#8030F0 0%,#3A2FE8 55%,#0F1160 100%);
}

html{scroll-behavior:smooth}
body{background:#0B0B18}
::selection{background:#22B8FF;color:#0B0B18}

.grad-bg{background:var(--grad)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cyan-glow{text-shadow:0 0 32px rgba(34,184,255,.35)}

/* Scroll-reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.12s}.reveal-d2{transition-delay:.24s}.reveal-d3{transition-delay:.36s}

/* Marquee ticker */
.marquee{overflow:hidden;position:relative}
.marquee-track{display:flex;gap:3.5rem;width:max-content;animation:marquee 28s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Dispersing cube motif (from the logo's "D") */
.cube{position:absolute;border-radius:18%;background:linear-gradient(135deg,#22B8FF,#A06BFF);animation:cubefloat 7s ease-in-out infinite}
@keyframes cubefloat{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-16px) rotate(-4deg)}}

/* Header on scroll */
.hdr{transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.hdr.scrolled{background:rgba(11,11,24,.85);backdrop-filter:blur(12px);border-color:#2C2E5E}

/* Cards */
.card{background:#151530;border:1px solid #2C2E5E;border-radius:1rem;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:#22B8FF}

/* Buttons */
.btn-primary{background:#22B8FF;color:#0B0B18;font-weight:700;border-radius:.75rem;transition:filter .2s,transform .2s}
.btn-primary:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-ghost{border:1px solid #2C2E5E;color:#fff;border-radius:.75rem;transition:border-color .2s,background .2s}
.btn-ghost:hover{border-color:#22B8FF;background:rgba(34,184,255,.08)}

/* Blog prose */
.prose-dm h2{color:#fff;font-family:Poppins,sans-serif;font-weight:700;font-size:1.5rem;margin:2.2rem 0 .8rem}
.prose-dm h3{color:#fff;font-family:Poppins,sans-serif;font-weight:600;font-size:1.15rem;margin:1.6rem 0 .6rem}
.prose-dm p{color:#C9D2F2;line-height:1.75;margin:.9rem 0}
.prose-dm ul,.prose-dm ol{color:#C9D2F2;line-height:1.7;margin:1rem 0 1rem 1.4rem}
.prose-dm ul{list-style:disc}.prose-dm ol{list-style:decimal}
.prose-dm li{margin:.35rem 0}
.prose-dm strong{color:#fff}
.prose-dm a{color:#22B8FF;text-decoration:underline;text-underline-offset:3px}
.prose-dm table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.95rem}
.prose-dm th{background:#1B1B3A;color:#fff;text-align:left;padding:.7rem .9rem;border:1px solid #2C2E5E}
.prose-dm td{color:#C9D2F2;padding:.7rem .9rem;border:1px solid #2C2E5E}
.prose-dm blockquote{border-left:3px solid #A06BFF;padding:.4rem 1.1rem;color:#8E9AC6;margin:1.2rem 0}
.prose-dm .callout{background:#151530;border:1px solid #2C2E5E;border-radius:1rem;padding:1.2rem 1.4rem;margin:1.5rem 0}

/* Intro preloader (logo animation) */
#intro{position:fixed;inset:0;z-index:100;background:#090917;display:flex;align-items:center;justify-content:center;transition:opacity .65s ease,visibility .65s}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
#intro video{width:min(92vw,900px);height:auto}
#intro iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0B0B18}
#intro .skip{position:absolute;bottom:2rem;right:2rem;color:#8E9AC6;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;border:1px solid #2C2E5E;border-radius:999px;padding:.5rem 1.1rem;background:transparent;transition:color .2s,border-color .2s}
#intro .skip:hover{color:#fff;border-color:#22B8FF}
#intro .bar{position:absolute;bottom:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,#22B8FF,#A06BFF)}
body.intro-lock{overflow:hidden}

/* Ambient brand video card */
.video-card{border:1px solid #2C2E5E;border-radius:.9rem;overflow:hidden;background:#090917}
.video-card video{display:block;width:100%;height:auto}
.video-card iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#0B0B18}

/* Form */
.field{background:#151530;border:1px solid #2C2E5E;border-radius:.75rem;color:#fff;padding:.8rem 1rem;width:100%;outline:none;transition:border-color .2s}
.field:focus{border-color:#22B8FF}
.field::placeholder{color:#8E9AC6}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee-track,.cube{animation:none}
}