/* Colby's Tech Life — premium interaction layer
   Native CSS/JS only: no animation framework required. */
:root{
  --ctl-ease:cubic-bezier(.22,1,.36,1);
  --ctl-ease-soft:cubic-bezier(.33,1,.68,1);
  --ctl-motion-fast:220ms;
  --ctl-motion-base:520ms;
  --ctl-motion-slow:820ms;
  --ctl-accent:#22e6ff;
  --ctl-blue:#168bff;
  --ctl-ink:#07152d;
}
html{scroll-padding-top:88px}
@view-transition{navigation:auto}
::view-transition-old(root){animation:ctl-page-out .18s ease both}
::view-transition-new(root){animation:ctl-page-in .34s var(--ctl-ease) both}
@keyframes ctl-page-out{to{opacity:.18}}
@keyframes ctl-page-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Navigation */
.site-header{will-change:transform;transition:transform var(--ctl-motion-fast) var(--ctl-ease),background-color var(--ctl-motion-fast) ease,border-color var(--ctl-motion-fast) ease,box-shadow var(--ctl-motion-fast) ease,backdrop-filter var(--ctl-motion-fast) ease}
.site-header.is-scrolled:not(.home-page .site-header){background:rgba(3,8,22,.92);box-shadow:0 12px 34px rgba(2,8,22,.18)}
.nav-links a{position:relative;overflow:hidden;background:transparent!important}
.nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--ctl-blue),var(--ctl-accent));transform:scaleX(0);transform-origin:right;transition:transform var(--ctl-motion-fast) var(--ctl-ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* Shared motion */
.reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity var(--ctl-motion-base) var(--ctl-ease),transform var(--ctl-motion-base) var(--ctl-ease)}
.reveal.visible{opacity:1;transform:none}
.reveal.visible>.mini-card,.reveal.visible>.included-card,.reveal.visible>.process-step,.reveal.visible>.recent-card,.reveal.visible>.detail-card,.reveal.visible>.pricing-card,.reveal.visible>.site-preview-card{animation:ctl-stagger-in var(--ctl-motion-slow) var(--ctl-ease) both}
.reveal.visible>:nth-child(2){animation-delay:70ms}.reveal.visible>:nth-child(3){animation-delay:140ms}.reveal.visible>:nth-child(4){animation-delay:210ms}.reveal.visible>:nth-child(5){animation-delay:280ms}.reveal.visible>:nth-child(6){animation-delay:350ms}.reveal.visible>:nth-child(7){animation-delay:420ms}.reveal.visible>:nth-child(8){animation-delay:490ms}
@keyframes ctl-stagger-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.page-hero{isolation:isolate}
.page-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(77,217,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(77,217,255,.06) 1px,transparent 1px);background-size:74px 74px;mask-image:linear-gradient(to bottom,#000,transparent 92%);animation:ctl-grid-drift 20s linear infinite}
.page-hero>.container{position:relative;z-index:1}
@keyframes ctl-grid-drift{to{background-position:74px 74px}}

/* Buttons and tactile cards */
.btn{position:relative;isolation:isolate;overflow:hidden;will-change:transform;transition:transform var(--ctl-motion-fast) var(--ctl-ease),box-shadow var(--ctl-motion-fast) ease,background var(--ctl-motion-fast) ease,border-color var(--ctl-motion-fast) ease,color var(--ctl-motion-fast) ease}
.btn::before{content:"";position:absolute;z-index:-1;inset:-2px;opacity:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.23) 48%,transparent 72%);transform:translateX(-70%);transition:opacity .2s ease,transform .5s var(--ctl-ease)}
.btn:hover::before{opacity:1;transform:translateX(70%)}
.btn:hover{transform:translateY(-2px)}
.mini-card,.detail-card,.home-price-card,.pricing-card,.recent-card,.process-step,.included-card,.site-preview-card,.about-card,.contact-panel,.contact-form{position:relative;isolation:isolate;overflow:hidden;transition:transform var(--ctl-motion-fast) var(--ctl-ease),border-color var(--ctl-motion-fast) ease,box-shadow var(--ctl-motion-fast) ease}
[data-interactive-card]::before{content:"";position:absolute;z-index:-1;width:260px;height:260px;left:calc(var(--pointer-x,50%) - 130px);top:calc(var(--pointer-y,50%) - 130px);border-radius:50%;opacity:0;background:radial-gradient(circle,rgba(34,230,255,.13),transparent 68%);transition:opacity .2s ease;pointer-events:none}
@media(hover:hover) and (pointer:fine){[data-interactive-card]:hover{transform:translateY(-4px);border-color:rgba(22,139,255,.28);box-shadow:0 24px 64px rgba(7,18,42,.12)}[data-interactive-card]:hover::before{opacity:1}}

/* Homepage hero sequence */
.home-3d-hero .hero-copy{will-change:transform}
.home-3d-hero .hero-tech-video{will-change:transform,opacity}
.home-3d-hero .hero-copy>.eyebrow,.home-3d-hero .hero-copy>.hero-lead,.home-3d-hero .hero-copy>.hero-actions,.home-3d-hero .hero-copy>.turnaround-line,.home-3d-hero .hero-copy>.hero-trust{opacity:0;transform:translateY(16px);animation:ctl-hero-enter .7s var(--ctl-ease) forwards}
.home-3d-hero .hero-copy>.eyebrow{animation-delay:.08s}.home-3d-hero .hero-copy>.hero-lead{animation-delay:.34s}.home-3d-hero .hero-copy>.hero-actions{animation-delay:.43s}.home-3d-hero .hero-copy>.turnaround-line{animation-delay:.51s}.home-3d-hero .hero-copy>.hero-trust{animation-delay:.58s}
.hero-title-lines{margin:0 0 22px;max-width:820px;font-size:clamp(3.15rem,6.6vw,6.25rem);line-height:.92;letter-spacing:-.074em;color:#fff;text-shadow:0 12px 38px rgba(0,0,0,.35)}
.hero-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-line>span{display:block;transform:translateY(112%);animation:ctl-line-enter .78s var(--ctl-ease) forwards}
.hero-line:nth-child(1)>span{animation-delay:.12s}.hero-line:nth-child(2)>span{animation-delay:.19s}.hero-line:nth-child(3)>span{animation-delay:.26s}
@keyframes ctl-line-enter{to{transform:none}}
@keyframes ctl-hero-enter{to{opacity:1;transform:none}}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;color:#cfe5fb;font-size:.82rem;font-weight:800}
.hero-trust span{padding:6px 9px;border:1px solid rgba(185,232,255,.16);border-radius:9px;background:rgba(2,14,31,.34);backdrop-filter:blur(8px)}

/* Editorial moving capabilities strip */
.capability-marquee{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(126,228,255,.16);background:#030816;color:#fff}
.capability-marquee::before,.capability-marquee::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:12vw;pointer-events:none}.capability-marquee::before{left:0;background:linear-gradient(90deg,#030816,transparent)}.capability-marquee::after{right:0;background:linear-gradient(-90deg,#030816,transparent)}
.capability-track{display:flex;width:max-content;gap:0;animation:ctl-marquee 30s linear infinite;will-change:transform}
.capability-group{display:flex;align-items:center;flex:none}
.capability-group span{display:flex;align-items:center;gap:22px;padding:18px 24px;font-size:clamp(.84rem,1.4vw,1rem);font-weight:900;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#d9edff}
.capability-group span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ctl-accent);box-shadow:0 0 16px rgba(34,230,255,.8)}
@keyframes ctl-marquee{to{transform:translateX(-50%)}}

/* Homepage service story */
.home-service-story{background:linear-gradient(180deg,#fff 0%,#f7fbff 100%)}
.service-story-layout{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(42px,7vw,96px);align-items:start}
.service-story-intro{position:sticky;top:118px;padding-top:6px}
.service-story-intro h2{font-size:clamp(2.6rem,5vw,4.7rem);max-width:9ch}
.service-story-intro p{max-width:36rem}
.service-story-progress{display:flex;align-items:center;gap:12px;margin-top:28px;color:#6e7f96;font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.service-story-progress::before{content:"";width:48px;height:2px;background:linear-gradient(90deg,var(--ctl-blue),var(--ctl-accent))}
.service-story-list{display:grid}
.service-story-item{position:relative;min-height:54vh;padding:clamp(28px,5vw,56px) 0;border-top:1px solid #d9e5f1;opacity:.48;transform:scale(.985);transform-origin:left center;transition:opacity .4s ease,transform .5s var(--ctl-ease)}
.service-story-item:last-child{border-bottom:1px solid #d9e5f1}
.service-story-item.active{opacity:1;transform:none}
.service-story-number{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:#087bd1;font-size:.78rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.service-story-number::after{content:"";height:1px;width:48px;background:#b9d8ee}
.service-story-item h3{font-size:clamp(2rem,4vw,3.6rem);letter-spacing:-.055em;margin-bottom:14px}
.service-story-item>p{max-width:48rem;font-size:clamp(1rem,1.5vw,1.12rem)}
.service-capabilities{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.service-capabilities span{padding:7px 10px;border:1px solid #d4e4f1;border-radius:9px;background:#fff;color:#40526c;font-size:.78rem;font-weight:850}

/* Proof metrics */
.proof-band{background:#061127;color:#fff;overflow:hidden}
.proof-band .section-head h2,.proof-band .section-head p{color:#fff}.proof-band .section-head p{color:#b8cce3}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:36px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.metric{padding:30px 24px;border-right:1px solid rgba(255,255,255,.12)}.metric:last-child{border-right:0}.metric-value{display:block;color:#fff;font-size:clamp(2.5rem,5vw,4.7rem);line-height:1;letter-spacing:-.07em;font-weight:950}.metric-label{display:block;margin-top:9px;color:#a9bfd7;font-size:.84rem;font-weight:800;line-height:1.45}

/* Featured project scroll story */
.featured-build{background:#020611;color:#fff}
.featured-build .kicker{color:#79eaff}.featured-build h2,.featured-build h3{color:#fff}.featured-build p{color:#b9cde4}
.featured-build-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);gap:clamp(36px,6vw,80px);align-items:start}
.featured-build-visual{position:sticky;top:104px;min-height:560px;border:1px solid rgba(116,222,255,.2);border-radius:20px;overflow:hidden;background:radial-gradient(circle at 78% 20%,rgba(34,230,255,.2),transparent 22rem),linear-gradient(145deg,#061127,#073b63);box-shadow:0 28px 80px rgba(0,0,0,.3)}
.featured-build-visual .browser-bar{position:relative;height:44px}.featured-build-viewport{position:absolute;inset:44px 0 0;background:#fff;overflow:hidden}.featured-build-viewport iframe{width:100%;height:100%;border:0;transform:scale(1.01);transition:transform .8s var(--ctl-ease);pointer-events:none}.featured-build-visual[data-stage="2"] iframe{transform:scale(1.035)}.featured-build-visual[data-stage="3"] iframe{transform:scale(1.015) translateY(-6px)}
.featured-build-copy{padding-top:8vh}.feature-step{min-height:50vh;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.12);opacity:.4;transition:opacity .35s ease}.feature-step.active{opacity:1}.feature-step small{display:block;margin-bottom:12px;color:#79eaff;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.feature-step h3{font-size:clamp(1.8rem,3.4vw,3rem);letter-spacing:-.05em}.feature-step p{max-width:38rem}

/* Work page becomes a case-study rhythm instead of repeated cards */
.website-showcase{counter-reset:ctl-project}
.site-preview-card.live-card{counter-increment:ctl-project;min-height:480px;padding:22px;gap:clamp(28px,5vw,64px)}
.site-preview-card.live-card .site-card-body::before{content:"0" counter(ctl-project) " / PROJECT";display:block;margin-bottom:14px;color:#087bd1;font-size:.72rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
@media(min-width:981px){.site-preview-card.live-card:nth-child(even)>.preview-frame{order:2}.site-preview-card.live-card:nth-child(even)>.site-card-body{order:1}}
.project-actions .btn::after{content:"↗";margin-left:8px;font-size:.9em;transition:transform var(--ctl-motion-fast) var(--ctl-ease)}.project-actions .btn:hover::after{transform:translate(2px,-2px)}

/* Footer polish */
.site-footer{position:relative;overflow:hidden;background:radial-gradient(circle at 85% 5%,rgba(22,139,255,.14),transparent 24rem),#030816}
.site-footer::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(34,230,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(34,230,255,.04) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to top,#000,transparent 75%)}
.site-footer>.container{position:relative}
.footer-links a{position:relative;width:max-content}.footer-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--ctl-accent);transition:right var(--ctl-motion-fast) var(--ctl-ease)}.footer-links a:hover::after{right:0}
.footer-pitch{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:0 0 44px;margin-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)}.footer-pitch .kicker{color:#79eaff}.footer-pitch h2{max-width:820px;margin:0;color:#fff;font-size:clamp(2.5rem,6vw,5.5rem);letter-spacing:-.07em}.footer-pitch .btn{flex:0 0 auto}

@media(max-width:980px){
  .nav-links.open{inset:68px 12px 12px!important;top:68px!important;align-content:start;gap:4px;padding:18px!important;border:1px solid rgba(126,228,255,.14)!important;border-radius:2px!important;background:rgba(3,8,22,.97)!important;box-shadow:0 28px 80px rgba(0,0,0,.42)!important;backdrop-filter:blur(20px);animation:ctl-menu-in .25s var(--ctl-ease) both;overflow:auto}
  .nav-links.open a{font-size:clamp(1.4rem,5vw,2rem);padding:14px!important}.nav-links a::after{left:14px;right:auto;width:42px;bottom:8px}
  @keyframes ctl-menu-in{from{opacity:0;transform:translateY(-10px) scale(.99)}to{opacity:1;transform:none}}
  .service-story-layout,.featured-build-layout{grid-template-columns:1fr}.service-story-intro,.featured-build-visual{position:relative;top:auto}.service-story-intro h2{max-width:13ch}.service-story-item{min-height:auto;padding:42px 0;opacity:1;transform:none}.featured-build-visual{min-height:500px}.featured-build-copy{padding-top:0}.feature-step{min-height:auto;padding:34px 0;opacity:1}.metric-grid{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}.footer-pitch{display:grid;align-items:start}
}
@media(max-width:640px){
  html{scroll-padding-top:76px}.hero-title-lines{font-size:clamp(2.7rem,12vw,3.65rem);line-height:.96;letter-spacing:-.064em}.hero-trust{font-size:.73rem}.capability-group span{padding:14px 16px;gap:16px;font-size:.75rem}.capability-track{animation-duration:24s}.service-story-layout{gap:20px}.service-story-intro h2{font-size:clamp(2.3rem,11vw,3.2rem)}.service-story-item{padding:34px 0}.service-story-item h3{font-size:clamp(1.9rem,10vw,2.65rem)}.metric-grid{grid-template-columns:1fr 1fr}.metric{padding:23px 16px}.metric-value{font-size:clamp(2.2rem,12vw,3.2rem)}.featured-build-visual{min-height:390px;border-radius:16px}.featured-build-viewport{inset:40px 0 0}.featured-build-visual .browser-bar{height:40px}.feature-step h3{font-size:2rem}.footer-pitch{padding-bottom:34px}.footer-pitch h2{font-size:clamp(2.4rem,12vw,3.55rem)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.reveal{opacity:1!important;transform:none!important}.hero-line>span,.home-3d-hero .hero-copy>*{opacity:1!important;transform:none!important}.capability-track{animation:none!important;transform:none!important}.capability-marquee{overflow-x:auto}.page-hero::after{animation:none}.featured-build-visual iframe{transform:none!important}
}


/* 2026-09 sharp interaction geometry */
.hero-trust span,
.service-capabilities span,
.featured-build-visual,
.nav-links.open{
  border-radius:2px!important;
}
.nav-links a::after{border-radius:0!important}