/* ============================================================
   VIDIOTION — shared site styles
   Loaded by every page except index.html (which uses home.css).
   ============================================================ */

:root{ --ease:cubic-bezier(.22,.61,.36,1); }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
.grain::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.04;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>"); }
.h-display{ letter-spacing:-.035em; line-height:1.02; }
.eyebrow{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
[data-reveal]{ opacity:0; transform:translateY(20px); }
.revealed[data-reveal]{ opacity:1; transform:none; transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:var(--d,0ms); }
.prose h2{ font-family:Outfit,sans-serif; font-weight:800; letter-spacing:-.03em; font-size:26px; margin-top:48px; margin-bottom:14px; }
.prose h3{ font-family:Outfit,sans-serif; font-weight:700; letter-spacing:-.02em; font-size:18px; margin-top:32px; margin-bottom:10px; }
.prose p{ font-size:16px; line-height:1.8; color:#4A4A44; margin-bottom:18px; }
.prose ul{ margin:0 0 20px; padding:0; }
.prose li{ font-size:16px; line-height:1.8; color:#4A4A44; margin-bottom:10px; padding-left:22px; position:relative; }
.prose li::before{ content:"→"; position:absolute; left:0; color:#1B1C18; }
.prose strong{ color:#1B1C18; font-weight:600; }
#bar{ transform-origin:0 50%; transform:scaleX(0); transition:transform .12s linear; }
.btn-dark{ transition:transform .28s var(--ease), background-color .28s var(--ease); }
.btn-dark:hover .arrow{ transform:translateX(3px); }
.arrow{ transition:transform .28s var(--ease); }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1!important; transform:none!important; transition:none!important; } *{ transition-duration:.06s!important; } }
@media (pointer:fine){ html.has-cursor body{ cursor:none; } html.has-cursor a, html.has-cursor button, html.has-cursor input, html.has-cursor select, html.has-cursor textarea, html.has-cursor label{ cursor:none; } }
html:not(.has-cursor) #cursor, html:not(.has-cursor) #cursorDot{ display:none; }
#cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; width:30px; height:30px; transform:translate(-3px,-3px); transition:transform .12s var(--ease), opacity .3s, filter .28s var(--ease); filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
#cursor svg{ display:block; width:100%; height:100%; }
#cursorDot{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; width:7px; height:7px; border-radius:2px; background:#D0FF00; border:1.5px solid #1B1C18; transform:translate(-50%,-50%) rotate(45deg); }
#cursor.is-hover{ filter:drop-shadow(0 3px 8px rgba(208,255,0,.6)); }
#cursor.is-hover .pen-nib{ fill:#D0FF00; }
#cursor.is-hover + #cursorDot, #cursorDot.is-hover{ width:11px; height:11px; }
#cursor.is-down{ transform:translate(-3px,-3px) scale(.82); }
@media (pointer:coarse){ #cursor,#cursorDot{ display:none; } body{ cursor:auto; } }
@media (prefers-reduced-motion: reduce){ body{ cursor:auto!important; } #cursor,#cursorDot{ display:none!important; } }
/* ---- brand gradient system ---- */
  :root{ --grad:linear-gradient(100deg,#1B1C18 0%,#3A4A00 30%,#D0FF00 62%,#FF6A1A 100%); }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation:gradshift 9s ease-in-out infinite; }
@keyframes gradshift{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
.grad-chip{ background:var(--grad); background-size:200% 100%; color:#1B1C18; animation:gradshift 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .grad-text,.grad-chip{ animation:none !important; } }
/* smooth write-on text reveal */
  .word{ display:inline-block; opacity:0; transform:translateY(.42em); filter:blur(6px); }
.revealed .word{ opacity:1; transform:none; filter:blur(0); transition:opacity .62s var(--ease), transform .62s var(--ease), filter .62s var(--ease); }
.writeline{ opacity:0; transform:translateY(.3em); filter:blur(4px); }
.revealed.writeline, .revealed .writeline{ opacity:1; transform:none; filter:blur(0); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); transition-delay:var(--wd,0ms); }
/* mobile hardening */
  html,body{ max-width:100%; overflow-x:hidden; }
img,svg,video{ max-width:100%; }
@media (max-width:640px){
    a,button,input,select,textarea{ min-height:44px; }
    a.navlink,footer a{ min-height:0; }
    h1,h2{ overflow-wrap:break-word; }
  }
@media (prefers-reduced-motion: reduce){ .word,.writeline{ opacity:1 !important; transform:none !important; filter:none !important; } }
:focus-visible{ outline:2px solid #1B1C18; outline-offset:3px; border-radius:6px; }
.navlink{ position:relative; color:#4A4A44; transition:color .25s var(--ease); }
.navlink:hover{ color:#1B1C18; }
.navlink::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background:#D0FF00; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.navlink:hover::after{ transform:scaleX(1); }
html{ scroll-behavior:smooth; }
.h-display{ letter-spacing:-.035em; line-height:.98; }
[data-reveal]{ opacity:0; transform:translateY(22px); }
.revealed[data-reveal]{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0ms); }
.card-lift{ transition:transform .4s var(--ease), border-color .4s var(--ease); }
.card-lift:hover{ transform:translateY(-4px); border-color:#1B1C18; }
.navlink{ position:relative; }
.navlink::after{ content:""; position:absolute; left:0; bottom:-4px; height:1.5px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .32s var(--ease); }
.navlink:hover::after{ transform:scaleX(1); transform-origin:left; }
:root{ --ease:cubic-bezier(.22,.61,.36,1); --grad:linear-gradient(115deg,#D0FF00 0%,#A8E000 35%,#FF6A1A 100%); }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-chip{ background:var(--grad); color:#1B1C18; }
.prose h2{ font-family:Outfit,sans-serif; font-weight:800; letter-spacing:-.03em; font-size:26px; margin-top:46px; margin-bottom:14px; }
.prose h3{ font-family:Outfit,sans-serif; font-weight:700; font-size:18px; margin-top:30px; margin-bottom:10px; }
.floaties{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.floatie{ position:absolute; opacity:.13; color:#1B1C18; animation:drift var(--dur,17s) ease-in-out infinite; animation-delay:var(--dl,0s); }
@keyframes drift{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-24px) rotate(calc(var(--r,0deg) + 8deg)); } }
#cursor{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; width:30px; height:30px; transform:translate(-3px,-3px); transition:transform .12s var(--ease), filter .28s var(--ease); filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1!important; transform:none!important; transition:none!important; } .floatie{ animation:none!important; } body{ cursor:auto!important; } #cursor,#cursorDot{ display:none!important; } }