/* Studio Infinite: shared look and effects, loaded by every page.
   Turn an effect off by deleting its block. */

/* Film grain over the whole page */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.06;
  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 baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* Cards lift on hover */
.step,.choice,.opt{transition:transform .25s,border-color .25s,box-shadow .25s;}
.step:hover,.choice:hover,.opt:hover{transform:translateY(-4px);border-color:var(--tungsten);box-shadow:0 12px 30px rgba(0,0,0,.35);}

/* Link underline slides in on hover */
.text-link{background:linear-gradient(var(--tungsten),var(--tungsten)) 0 100%/0 1px no-repeat!important;transition:background-size .3s;text-decoration:none!important;}
.text-link:hover{background-size:100% 1px!important;}

/* Letterbox bars on the founder photo */
.crew-photo img{border-block:22px solid #000;background:#000;}

/* Text highlight and scrollbar in the brand color */
::selection{background:var(--tungsten);color:#fff;}
html{scrollbar-color:var(--tungsten) transparent;scrollbar-width:thin;}

/* No red recording dots anywhere */
.rec{display:none!important;}

/* Realism buttons (based on a Uiverse.io design): dark glass, white shine, blue glow */
.btn-primary,.btn-ghost,.m-cta{
  color:#fff!important;border:2px solid transparent!important;animation:none!important;
  background:
    radial-gradient(circle 60px at 80% -40%, rgba(255,255,255,.55), transparent 70%) padding-box,
    linear-gradient(160deg,#2b2f31 0%,#0e1011 60%) padding-box,
    radial-gradient(circle 90px at 88% -20%, #ffffff, transparent 70%) border-box,
    radial-gradient(circle 90px at 0% 120%, var(--tungsten), transparent 75%) border-box,
    #2a2d2e border-box!important;
  box-shadow:-14px 14px 34px -14px rgba(59,130,246,.7), inset 0 1px 0 rgba(255,255,255,.08)!important;
  transition:box-shadow .3s, transform .2s!important;}
.btn-primary:hover,.btn-ghost:hover,.m-cta:hover{box-shadow:-16px 16px 44px -10px rgba(59,130,246,.95), inset 0 1px 0 rgba(255,255,255,.12)!important;transform:translateY(-1px);}
.btn-primary:active,.btn-ghost:active,.m-cta:active{transform:translateY(1px);}
.btn.primary{color:#fff!important;}

/* Social icon dock in the footer (based on a Uiverse.io design) */
.socials-row{flex-basis:100%;width:100%;}
.socials{display:inline-flex;gap:8px;padding:6px;border:1px solid var(--line);border-radius:16px;background:#050606;margin:6px 0 14px;}
.socials a{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px rgba(0,0,0,.4);transition:transform .2s,box-shadow .2s,filter .2s;}
.socials a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 55%);pointer-events:none;}
.socials a:hover{transform:translateY(-3px) scale(1.06);filter:brightness(1.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px rgba(0,0,0,.55);}
.socials svg{width:24px;height:24px;position:relative;z-index:1;}
.s-instagram{background:linear-gradient(135deg,#7a3cf0,#e1306c 55%,#f7a23b);}
.s-tiktok{background:linear-gradient(145deg,#2a2d31,#0d0f11);}
.s-youtube{background:linear-gradient(145deg,#e0443b,#a8211b);}
.s-linkedin{background:linear-gradient(145deg,#2f6fe0,#1b4fae);}
.s-facebook{background:linear-gradient(145deg,#2d7ff9,#1559c9);}

@media (prefers-reduced-motion:reduce){.step:hover,.choice:hover,.opt:hover,.socials a:hover{transform:none;}}

/* Ask Ian chat in the brand blue (overrides assets/chat.css, which loads before this file) */
.si-chat{--c-tungsten:#3B82F6;}
.si-chat__launch{border-color:rgba(59,130,246,.45);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 0 rgba(59,130,246,0);}
.si-chat__launch:hover{border-color:var(--c-tungsten);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 24px rgba(59,130,246,.25);}
.si-chat__dot{box-shadow:0 0 10px rgba(59,130,246,.7);}
.si-chat__dot::after{border-color:rgba(59,130,246,.5);}
.si-chat__msg--user{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.35);}
.si-chat__msg--note{border-color:rgba(59,130,246,.5);}
.si-chat__chip:hover{background:rgba(59,130,246,.08);}
.si-chat__input:focus{border-color:rgba(59,130,246,.6);box-shadow:0 0 0 3px rgba(59,130,246,.1);}
.si-chat__send:hover{background:#60A5FA;box-shadow:0 0 18px rgba(59,130,246,.35);}

/* Header logo: mark only. The words stay in the page for screen readers and Google, just not shown */
.brand{display:inline-flex!important;align-items:center;font-size:0!important;line-height:0;padding:6px 0;}
.brand span{font-size:0!important;}
.brand .brand-mark{height:28px!important;width:auto!important;margin:0!important;vertical-align:middle!important;
  transform-origin:50% 60%;transition:transform .55s cubic-bezier(.34,1.56,.64,1),filter .4s ease;}
.brand:hover .brand-mark,.brand:focus-visible .brand-mark{transform:scale(1.14) rotate(-8deg);
  filter:drop-shadow(0 0 6px rgba(59,130,246,.9)) drop-shadow(0 0 16px rgba(59,130,246,.5));animation:si-logo-flow 1.6s ease-in-out .55s infinite;}
@keyframes si-logo-flow{0%,100%{transform:scale(1.14) rotate(-8deg);}50%{transform:scale(1.18) rotate(8deg);}}
.brand:active .brand-mark{transform:scale(.94);}
@media (prefers-reduced-motion:reduce){.brand:hover .brand-mark{animation:none;transform:none;}}

/* Reel in theater mode: a wide, cinema shaped player under the headline, with the timeline the same width.
   The reel is still switched off on the homepage (data-reel="off" on <body>) until the new videos are in. */
/* width matches the current clips (960x540). With 1080p or 4K exports this can go back up to 1680px and 21/9 */
.h2o-grid .mon,.h2o-grid .reel,.h2o-grid .rc{grid-column:1/-1;justify-self:start;width:min(calc(100vw - 32px),1180px);margin-left:calc((100% - min(calc(100vw - 32px),1180px)) / 2);margin-right:0;}
@media (min-width:900px){.h2o-grid .mon{margin-top:clamp(36px,5vw,64px);}}
.mon-frame{aspect-ratio:16/9;max-height:80vh;border-radius:8px;box-shadow:0 40px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(59,130,246,.08),0 0 80px -20px rgba(59,130,246,.25);}
.mon-frame.is-v .mon-media{width:31.64%;}
.mon-hud{font-size:11px;}
.mon-hud .tl{left:18px;top:14px;}.mon-hud .tr{right:18px;top:14px;}.mon-hud .bl{left:18px;bottom:16px;}
.mon-hud .bl strong{font-size:clamp(16px,2vw,26px);}
.mon-snd{right:16px;bottom:16px;width:42px;height:42px;}
@media (max-width:640px){.mon-frame{aspect-ratio:16/9;}.mon-frame.is-v .mon-media{width:31.64%;}}

/* Intro screen on the homepage: "loading reel / lenses / lights / footage" (based on a Uiverse.io loader by kennyotsu).
   Shows once per visit for about 1.5 seconds. The markup and timing script sit at the top of index.html. */
.si-loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:var(--ground,#0D1317);transition:opacity .5s ease,visibility 0s linear .5s;}
.si-loader.is-done{opacity:0;visibility:hidden;}
.si-loader .sil{--bg:var(--ground,#0D1317);display:flex;align-items:stretch;height:1.5em;line-height:1.5em;color:rgb(124,124,124);font-family:"Archivo","IBM Plex Sans",sans-serif;font-weight:500;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.01em;}
.si-loader .sil-words{overflow:hidden;position:relative;height:1.5em;}
.si-loader .sil-words::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--bg) 10%,transparent 30%,transparent 70%,var(--bg) 90%);z-index:2;}
.si-loader .sil-word{display:block;height:1.5em;padding-left:.28em;color:var(--tungsten);animation:sil-spin 4s infinite;}
@keyframes sil-spin{10%{transform:translateY(-102%);}25%{transform:translateY(-100%);}35%{transform:translateY(-202%);}50%{transform:translateY(-200%);}60%{transform:translateY(-302%);}75%{transform:translateY(-300%);}85%{transform:translateY(-402%);}100%{transform:translateY(-400%);}}
@media (prefers-reduced-motion:reduce){.si-loader{display:none;}}

/* ---------- Phones: roomier buttons, bigger tap targets, smoother scrolling ---------- */
@media (max-width:640px){
  .h2o-cta{flex-direction:column;align-items:stretch;}
  .h2o-cta .btn{width:100%;justify-content:center;text-align:center;}
  .h2o-grid .mon{margin-top:32px;}
  .reel-btn{width:40px;height:40px;}
  .reel-heads .h-v2,.reel-lane.v2{height:56px;}
  .reel-heads .h-v1,.reel-lane.v1{height:46px;}
  footer a{display:inline-block;padding-block:11px;}
  footer .wrap{row-gap:0;}
  body::after{display:none;} /* film grain off on phones */
  .si-chat__launch{padding:10px 14px;}
  .nav-in .btn-primary{padding:10px 14px;font-size:14px;}
}

/* Ask Ian button: dark pill with a flowing rainbow border and glow (based on a Uiverse.io design by elijahgummer) */
@keyframes si-rainbow{0%{background-position:0%;}100%{background-position:200%;}}
.si-chat__launch{position:relative;isolation:isolate;overflow:visible!important;
  border:calc(.08*1rem) solid transparent!important;border-radius:999px!important;
  background:linear-gradient(#121213,#121213),linear-gradient(#121213 50%,rgba(18,18,19,.6) 80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(0,100%,63%),hsl(90,100%,63%),hsl(210,100%,63%),hsl(195,100%,63%),hsl(270,100%,63%))!important;
  background-size:200%!important;background-clip:padding-box,border-box,border-box!important;background-origin:border-box!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:none!important;animation:si-rainbow 2s linear infinite;transition:transform .2s ease!important;}
.si-chat__launch::before{content:"";position:absolute;bottom:-20%;left:50%;z-index:-1;height:20%;width:60%;transform:translateX(-50%);
  background:linear-gradient(90deg,hsl(0,100%,63%),hsl(90,100%,63%),hsl(210,100%,63%),hsl(195,100%,63%),hsl(270,100%,63%));background-size:200%;animation:si-rainbow 2s linear infinite;filter:blur(.8rem);pointer-events:none;}
.si-chat__launch:hover{transform:scale(1.05);box-shadow:none!important;}
.si-chat__launch:active{transform:scale(.95);}
@media (prefers-reduced-motion:reduce){.si-chat__launch,.si-chat__launch::before{animation:none;}}

/* Ian's live dot in green */
.si-chat__dot{background:#22C55E!important;box-shadow:0 0 10px rgba(34,197,94,.75)!important;}
.si-chat__dot::after{border-color:rgba(34,197,94,.55)!important;}