/* ==================================================================
   YOUR ANIMATION PLAYGROUND
   ------------------------------------------------------------------
   This file is loaded LAST, so anything here overrides the defaults.
   Add new keyframes / effects below without touching core files.

   Available design tokens (from theme.css):
     var(--alert)   phosphor green   var(--cyan)   terminal cyan
     var(--success) acid lime        var(--violet) amber
     var(--surface) panel bg         var(--border) hairline

   Handy hooks already in the markup:
     .reveal        -> gets class "in" when scrolled into view
     [data-tilt]    -> 3D tilt on hover (js/animations.custom.js)
     .section       -> every page section

   Example:
   .my-glow-card { animation: my-pulse 3s ease-in-out infinite; }
   @keyframes my-pulse {
     0%, 100% { box-shadow: 0 0 0 0 var(--alert); }
     50%      { box-shadow: 0 0 40px -6px var(--alert); }
   }
================================================================== */

/* ==================================================================
   BRUCELEETHEHACKER BRAND UPGRADE — cinematic command-center layer
================================================================== */
:root {
  --pink: oklch(0.78 0.19 350);
  --blue: oklch(0.78 0.16 245);
  --gold: oklch(0.86 0.17 95);
}

.brand-orbit { position: absolute; inset: 50% auto auto 50%; width: min(42vw, 520px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: .5; }
.brand-orbit::before, .brand-orbit::after { content: ""; position: absolute; inset: 8%; border: 1px solid color-mix(in oklab, var(--cyan) 45%, transparent); border-radius: 50%; box-shadow: 0 0 60px color-mix(in oklab, var(--cyan) 18%, transparent), inset 0 0 60px color-mix(in oklab, var(--alert) 8%, transparent); animation: orbit-spin 18s linear infinite; }
.brand-orbit::after { inset: 20%; border-color: color-mix(in oklab, var(--pink) 35%, transparent); animation-duration: 11s; animation-direction: reverse; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.brand-lockup { display: inline-flex; align-items: center; gap: .7rem; padding: .45rem .7rem; border: 1px solid color-mix(in oklab, var(--cyan) 45%, transparent); background: color-mix(in oklab, var(--surface) 75%, transparent); box-shadow: var(--glow-cyan); backdrop-filter: blur(8px); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; }
.brand-lockup .brand-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--pink); box-shadow: 0 0 18px var(--pink); animation: status-pulse 1.6s ease-in-out infinite; }
@keyframes status-pulse { 50% { transform: scale(1.45); opacity: .55; } }

.hero-title .line-1 { text-shadow: 0 0 30px color-mix(in oklab, var(--alert) 38%, transparent), 0 0 70px color-mix(in oklab, var(--pink) 15%, transparent); }
.hero-title .line-2 { background: linear-gradient(90deg, var(--cyan), var(--pink), var(--violet), var(--cyan)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: spectrum 7s linear infinite; }
@keyframes spectrum { to { background-position: 300% 0; } }

.cyber-grid { mask-image: radial-gradient(circle at center, black, transparent 82%); }
.hud-panel, .glass-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s, background .35s; }
.hud-panel:hover, .glass-card:hover { border-color: color-mix(in oklab, var(--cyan) 62%, var(--border)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--cyan) 12%, transparent), 0 18px 60px color-mix(in oklab, var(--background) 45%, transparent), 0 0 32px color-mix(in oklab, var(--cyan) 12%, transparent); transform: translateY(-4px); }

.project-card { position: relative; overflow: hidden; isolation: isolate; }
.project-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 20%, color-mix(in oklab, var(--cyan) 9%, transparent), transparent 70%); transform: translateX(-120%); animation: card-scan 5s ease-in-out infinite; pointer-events: none; }
@keyframes card-scan { 55%,100% { transform: translateX(120%); } }

.signal-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-top: 1.5rem; }
.signal-node { padding: .75rem; border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 80%, transparent); position: relative; overflow: hidden; }
.signal-node::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: linear-gradient(var(--cyan), var(--pink)); animation: signal-flow 2.4s ease-in-out infinite; }
@keyframes signal-flow { 0%,100% { transform: translateY(-100%); } 50% { transform: translateY(100%); } }

#brand-command { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: flex; gap: .5rem; align-items: center; padding: .65rem .8rem; border: 1px solid color-mix(in oklab, var(--pink) 45%, var(--border)); background: color-mix(in oklab, var(--background) 88%, transparent); backdrop-filter: blur(12px); box-shadow: 0 0 30px color-mix(in oklab, var(--pink) 12%, transparent); font-size: .65rem; }
#brand-command .pulse { width: .45rem; height: .45rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px var(--success); }

@media (max-width: 720px) {
  .brand-orbit { width: 90vw; opacity: .22; }
  .signal-strip { grid-template-columns: repeat(2, 1fr); }
  #brand-command { right: .6rem; bottom: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ================================================================
   IDENTITY CORE — temporary visual shell for the user's future
   reference photo / likeness asset. The actual face is intentionally
   not fabricated; replace this module with the supplied portrait.
================================================================ */
.identity-pod { position: relative; min-height: 300px; overflow: hidden; display: grid; place-items: center; isolation: isolate; background: radial-gradient(circle at 50% 36%, color-mix(in oklab, var(--cyan) 13%, var(--surface)), var(--surface)); }
.identity-halo { position:absolute; width:220px; aspect-ratio:1; border-radius:50%; border:1px solid color-mix(in oklab,var(--cyan) 55%,transparent); box-shadow:0 0 50px color-mix(in oklab,var(--cyan) 18%,transparent), inset 0 0 40px color-mix(in oklab,var(--pink) 10%,transparent); animation: identity-rotate 14s linear infinite; }
.identity-halo::before,.identity-halo::after { content:""; position:absolute; inset:18%; border-radius:50%; border:1px dashed color-mix(in oklab,var(--pink) 45%,transparent); animation: identity-rotate 9s linear infinite reverse; }
.identity-halo::after { inset:36%; border-color:color-mix(in oklab,var(--violet) 50%,transparent); }
@keyframes identity-rotate { to { transform:rotate(360deg); } }
.identity-scan { position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,color-mix(in oklab,var(--cyan) 12%,transparent) 50%,transparent 58%); animation:identity-scan 3.2s ease-in-out infinite; pointer-events:none; }
@keyframes identity-scan { 0%,100%{transform:translateY(-35%)} 50%{transform:translateY(35%)} }
.identity-silhouette { position:relative; width:150px; height:220px; filter:drop-shadow(0 0 22px color-mix(in oklab,var(--cyan) 22%,transparent)); transform:perspective(600px) rotateY(-8deg); animation:identity-float 4s ease-in-out infinite; }
@keyframes identity-float { 0%,100%{transform:perspective(600px) rotateY(-8deg) translateY(2px)} 50%{transform:perspective(600px) rotateY(8deg) translateY(-7px)} }
.avatar-head { position:absolute; width:64px; height:76px; left:43px; top:14px; border-radius:48% 48% 44% 44%; background:linear-gradient(145deg,#d9e1e7,#7d8995 62%,#2b333c); box-shadow:0 0 22px color-mix(in oklab,var(--cyan) 18%,transparent); }
.avatar-head::before { content:""; position:absolute; width:68px; height:30px; left:-2px; top:-4px; border-radius:60% 60% 35% 35%; background:linear-gradient(145deg,#111827,#02040a); }
.avatar-neck { position:absolute; width:32px; height:28px; left:59px; top:78px; background:#9aa5ae; }
.avatar-coat { position:absolute; left:18px; top:98px; width:114px; height:112px; border-radius:22px 22px 10px 10px; background:linear-gradient(105deg,#080b10 0 45%,#f4f6f8 46% 54%,#080b10 55%); clip-path:polygon(18% 0,82% 0,100% 100%,0 100%); box-shadow:inset 0 0 20px rgba(255,255,255,.06),0 0 24px rgba(0,0,0,.5); }
.avatar-coat::after { content:""; position:absolute; left:50%; top:12px; bottom:0; width:2px; background:color-mix(in oklab,var(--cyan) 65%,transparent); box-shadow:0 0 10px var(--cyan); }
.identity-copy { position:absolute; left:1rem; right:1rem; bottom:1rem; z-index:3; padding:.65rem .75rem; border:1px solid color-mix(in oklab,var(--cyan) 35%,var(--border)); background:color-mix(in oklab,var(--background) 80%,transparent); backdrop-filter:blur(8px); }
.identity-name { font-weight:700; letter-spacing:.12em; font-size:.85rem; margin:.2rem 0; }
.identity-name span { color:var(--pink); font-size:.6em; margin:0 .2rem; }
.identity-status { margin-top:.45rem; font-size:.55rem; letter-spacing:.08em; color:var(--success); }
.project-actions { display:flex; gap:.65rem; margin-top:1rem; flex-wrap:wrap; }
.project-source { margin-top:.55rem; color:var(--cyan); font:600 .58rem/1.2 var(--mono,monospace); letter-spacing:.12em; opacity:.78; }
@media (max-width:720px) { .identity-pod{min-height:270px}.identity-silhouette{transform:scale(.9)} .project-actions .btn{flex:1;text-align:center} }

/* ==================================================================
   VEDA NISHANTH // CINEMATIC IDENTITY CORE
   Uses the user's supplied portrait plus a generated cinematic scene.
   The face remains a real supplied portrait; the motion is layered CSS depth.
================================================================== */
.identity-pod { min-height: 620px; perspective: 1200px; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(24, 198, 255, .10), var(--surface) 58%, #020307); }
.identity-pod::before { content:""; position:absolute; inset:-30%; background:conic-gradient(from 0deg, transparent 0 68%, rgba(24,198,255,.10) 72%, transparent 76% 100%); animation: identity-radar 10s linear infinite; pointer-events:none; }
@keyframes identity-radar { to { transform:rotate(360deg); } }
.identity-portrait { position:relative; z-index:2; display:block; width:min(100%, 390px); height:auto; max-height:570px; object-fit:cover; object-position:50% 22%; border-radius:18px; transform:perspective(1100px) rotateY(-7deg) rotateX(1deg) translateZ(20px); filter:saturate(.95) contrast(1.05) drop-shadow(0 22px 42px rgba(0,0,0,.65)); animation: identity-3d-float 6s ease-in-out infinite; }
.identity-portrait::after { content:""; }
.identity-depth { position:absolute; z-index:1; width:min(100%,390px); aspect-ratio:2/3; border-radius:18px; background:linear-gradient(145deg,rgba(0,230,255,.18),rgba(170,75,255,.08)); transform:translateX(14px) translateY(10px) perspective(1100px) rotateY(-7deg); filter:blur(7px); opacity:.65; animation: identity-depth 6s ease-in-out infinite; }
@keyframes identity-3d-float { 0%,100% { transform:perspective(1100px) rotateY(-7deg) rotateX(1deg) translate3d(0,8px,20px); } 50% { transform:perspective(1100px) rotateY(7deg) rotateX(-1deg) translate3d(0,-10px,35px); } }
@keyframes identity-depth { 0%,100% { transform:translate(16px,16px) perspective(1100px) rotateY(-7deg); } 50% { transform:translate(-8px,6px) perspective(1100px) rotateY(7deg); } }
.identity-reticle { position:absolute; z-index:3; width:calc(min(100%,390px) + 34px); aspect-ratio:2/3; border:1px solid rgba(85,240,255,.25); border-radius:22px; pointer-events:none; animation: reticle-breathe 4s ease-in-out infinite; }
.identity-reticle::before,.identity-reticle::after { content:""; position:absolute; width:24px; height:24px; border-color:var(--cyan); border-style:solid; }
.identity-reticle::before { left:-5px; top:-5px; border-width:2px 0 0 2px; }
.identity-reticle::after { right:-5px; bottom:-5px; border-width:0 2px 2px 0; }
@keyframes reticle-breathe { 50% { transform:scale(1.015); opacity:.65; } }
.identity-scan { z-index:4; mix-blend-mode:screen; background:linear-gradient(180deg,transparent 38%,rgba(0,230,255,.18) 50%,transparent 62%); }
.identity-copy { z-index:5; }
.profile-photo-card { overflow:hidden; }
.profile-photo-frame { position:relative; overflow:hidden; border:1px solid rgba(70,220,255,.25); background:#030508; }
.profile-photo-frame img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; filter:contrast(1.04) saturate(.96); }
.profile-photo-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 0 45%,rgba(0,230,255,.08) 50%,transparent 55%); transform:translateX(-100%); animation:photo-sweep 5s ease-in-out infinite; }
@keyframes photo-sweep { 55%,100% { transform:translateX(100%); } }
.photo-meta { display:flex; justify-content:space-between; gap:1rem; margin-top:.7rem; }
.photo-corner { position:absolute; width:22px; height:22px; border-color:var(--cyan); border-style:solid; z-index:2; }
.photo-corner-a { left:10px; top:10px; border-width:2px 0 0 2px; }
.photo-corner-b { right:10px; bottom:10px; border-width:0 2px 2px 0; }
.identity-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:1.25rem; }
.identity-profile-copy h2 { margin:.45rem 0 .8rem; font-size:clamp(1.7rem,3vw,2.7rem); }
.profile-links { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.1rem; }
.profile-page { position:relative; z-index:10; }
.profile-hero { padding-top:8rem; }
.profile-hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:3rem; }
.profile-lead { max-width:48rem; color:var(--muted-foreground); font-size:1.1rem; line-height:1.8; }
.profile-image-stage { position:relative; min-height:560px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--border); background:radial-gradient(circle at 50% 45%,rgba(0,220,255,.11),rgba(0,0,0,.1) 50%,rgba(120,40,255,.08)); }
.profile-image-stage img { width:min(100%,560px); aspect-ratio:1/1; object-fit:cover; border-radius:50%; position:relative; z-index:2; box-shadow:0 0 80px rgba(0,220,255,.18); animation:profile-float 6s ease-in-out infinite; }
.profile-orbit { position:absolute; width:78%; aspect-ratio:1; border:1px solid rgba(0,230,255,.35); border-radius:50%; transform:rotateX(65deg) rotateZ(-10deg); box-shadow:0 0 70px rgba(0,230,255,.12); animation:orbit-spin 13s linear infinite; }
.profile-orbit::after { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--cyan); box-shadow:0 0 20px var(--cyan); top:6%; left:16%; }
.profile-scan { position:absolute; inset:12%; z-index:3; border-radius:50%; background:linear-gradient(180deg,transparent 46%,rgba(0,240,255,.14) 50%,transparent 54%); animation:profile-scan 3.8s ease-in-out infinite; pointer-events:none; }
.profile-tag { position:absolute; left:1rem; bottom:1rem; z-index:4; padding:.55rem .7rem; font:600 .58rem/1.2 var(--mono,monospace); letter-spacing:.12em; color:var(--success); background:rgba(0,0,0,.72); border:1px solid rgba(0,255,140,.25); }
@keyframes profile-float { 0%,100% { transform:translateY(5px) rotateY(-2deg); } 50% { transform:translateY(-10px) rotateY(2deg); } }
@keyframes profile-scan { 0%,100% { transform:translateY(-12%); } 50% { transform:translateY(12%); } }
@media (max-width: 900px) { .identity-grid,.profile-hero-grid { grid-template-columns:1fr; } .identity-pod { min-height:540px; } .profile-image-stage { min-height:430px; } }
@media (max-width: 720px) { .identity-pod { min-height:470px; } .identity-portrait { width:min(90%,320px); } .identity-reticle { width:calc(min(90%,320px) + 24px); } .profile-image-stage { min-height:360px; } }
@media (prefers-reduced-motion: reduce) { .identity-portrait,.identity-depth,.identity-reticle,.profile-image-stage img,.profile-orbit { animation:none !important; } }