/* Colby's Tech Life — Cinematic Experience V2: template rejection + responsive/reduced-motion states. */

/* The live iframe never receives pointer/focus interaction until the LIVE stage is materially visible. */
.build-live{visibility:hidden;pointer-events:none}
.cinematic-build[data-build-stage="5"] .build-live{visibility:visible}
.cinematic-build[data-build-stage="5"] .build-live.is-interactive{pointer-events:auto}

/* 04 — generic template destruction */
.template-breaker{position:relative;height:320vh;background:#020611;color:#fff;--break-instability:0;--break-fracture:0;--break-burst:0;--break-final:0}
.template-breaker-sticky{position:sticky;contain:paint;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 50% 46%,rgba(20,130,255,.13),transparent 30rem),linear-gradient(180deg,#020611,#01040c 88%)}
.template-breaker-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(85,220,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(85,220,255,.045) 1px,transparent 1px);background-size:62px 62px;mask-image:radial-gradient(circle,#000,transparent 73%);transform:perspective(900px) rotateX(calc(var(--break-fracture) * 1.5deg)) translateY(calc(var(--break-burst) * 28px)) scale(calc(1 + var(--break-burst) * .025));opacity:calc(1 - var(--break-final) * .6)}
.template-breaker-grid::after{content:"REJECTION PROTOCOL / CTL-05";position:absolute;right:7%;bottom:7%;color:rgba(103,232,255,.4);font:800 .55rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em}
.breaker-intro{position:absolute;z-index:2;top:clamp(92px,12vh,130px);left:50%;width:min(1000px,calc(100% - 44px));transform:translateX(-50%);text-align:center;opacity:1;will-change:opacity,transform}
.breaker-intro .kicker{color:#66e8ff}.breaker-intro h2{margin:0;color:#fff;font-size:clamp(3.2rem,8vw,7.5rem);line-height:.86;letter-spacing:-.075em}.breaker-intro h2 span{display:block;color:transparent;-webkit-text-stroke:1px rgba(190,232,255,.46)}
.generic-site{position:relative;z-index:3;width:min(920px,calc(100% - 44px));height:min(54vh,520px);margin-top:12vh;background:transparent;overflow:visible;transform-style:preserve-3d;will-change:transform,filter}
.generic-site::before{content:"";position:absolute;z-index:12;inset:-4%;pointer-events:none;background:linear-gradient(103deg,transparent 0 47%,rgba(115,236,255,.08) 48%,rgba(219,251,255,.9) 49%,rgba(74,214,255,.18) 50%,transparent 51% 100%);clip-path:polygon(0 calc(49% - var(--break-fracture) * 17%),100% calc(44% + var(--break-fracture) * 12%),100% calc(47% + var(--break-fracture) * 13%),0 calc(52% - var(--break-fracture) * 15%));opacity:var(--break-fracture);filter:drop-shadow(4px 0 0 rgba(255,52,115,.2)) drop-shadow(-4px 0 0 rgba(27,220,255,.25))}
.generic-site::after{content:"";position:absolute;z-index:13;inset:0;border-radius:20px;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(102,229,255,.045) 8px,transparent 9px),linear-gradient(90deg,rgba(255,40,108,.08),transparent 8%,transparent 92%,rgba(50,224,255,.09));mix-blend-mode:screen;opacity:calc(var(--break-instability) * .7 + var(--break-fracture) * .22);clip-path:inset(calc((1 - var(--break-instability)) * 48%) 0)}
.generic-shell{position:absolute;inset:0;z-index:0;border:1px solid rgba(164,225,255,.16);border-radius:20px;background:#eef3f7;box-shadow:0 38px 100px rgba(0,0,0,.48);transform-origin:center}
.generic-top{position:relative;z-index:2;height:42px;border-radius:20px 20px 0 0;display:flex;align-items:center;gap:7px;padding:0 13px;background:#dce4ea;border-bottom:1px solid #c9d4dc;transform-origin:left center}.generic-top i{width:8px;height:8px;border-radius:50%;background:#a4b0ba}.generic-top span{margin-left:8px;color:#82919c;font:700 .65rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.generic-body{position:relative;z-index:2;height:calc(100% - 42px);padding:clamp(18px,3vw,36px);display:grid;grid-template-rows:auto 1fr auto;gap:22px;color:#213244;transform:translate3d(calc(var(--break-instability) * -2px),calc(var(--break-instability) * 1px),0)}
.generic-nav{display:flex;align-items:center;justify-content:space-between;transform-origin:right center}.generic-logo{width:120px;height:16px;border-radius:4px;background:#9eabb4}.generic-menu{display:flex;gap:10px}.generic-menu span{width:54px;height:9px;border-radius:4px;background:#bac4cb}.generic-menu span:nth-child(2){transform:translateY(calc(var(--break-instability) * -3px))}
.generic-hero{display:grid;grid-template-columns:1fr .86fr;gap:24px;align-items:center}.generic-copy{display:grid;gap:11px;transform-origin:left center}.generic-copy span{height:12px;border-radius:5px;background:#bcc7cf}.generic-copy span:nth-child(1){width:30%}.generic-copy span:nth-child(2){width:92%;height:42px;background:#9baab5}.generic-copy span:nth-child(3){width:78%;height:42px;background:#a9b6bf}.generic-copy span:nth-child(4){width:64%}.generic-copy button{width:128px;height:40px;margin-top:8px;border:0;border-radius:5px;background:#7f919f;transform:translate3d(calc(var(--break-instability) * 4px),0,0) rotate(calc(var(--break-instability) * .5deg));box-shadow:calc(var(--break-instability) * 3px) 0 0 rgba(255,48,112,.14),calc(var(--break-instability) * -3px) 0 0 rgba(28,219,255,.18)}
.generic-photo{height:100%;min-height:190px;border-radius:9px;background:linear-gradient(145deg,#b8c5ce,#8fa0ad);transform-origin:right center}.generic-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.generic-card{height:70px;border-radius:8px;background:#d4dde4;border:1px solid #c4d0d8;transform-origin:center}.generic-card:nth-child(2){transform:translateY(calc(var(--break-instability) * 3px))}
.breaker-word{position:absolute;z-index:1;left:50%;top:52%;width:100%;overflow:hidden;text-align:center;transform:translate(-50%,-50%) scale(calc(1 + var(--break-burst) * .06));color:rgba(112,226,255,calc(.025 + var(--break-fracture) * .035));font-size:clamp(7rem,22vw,22rem);font-weight:950;letter-spacing:-.09em;white-space:nowrap;user-select:none;filter:blur(calc(var(--break-burst) * 2px))}
.breaker-final{visibility:hidden;pointer-events:none;position:absolute;z-index:18;left:50%;top:50%;width:min(980px,calc(100% - 44px));text-align:center;transform:translate(-50%,-50%)}
.template-breaker.is-revealed .breaker-final{visibility:visible;pointer-events:auto}
.breaker-final::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,92vw);height:1px;transform:translate(-50%,-50%) scaleX(var(--break-final));background:linear-gradient(90deg,transparent,rgba(98,232,255,.75),transparent);box-shadow:0 0 40px rgba(50,222,255,.36);opacity:calc(1 - var(--break-final) * .45);pointer-events:none}
.breaker-final-inner{opacity:0;transform:translate3d(0,38px,0) scale(.965);will-change:transform,opacity;filter:blur(calc((1 - var(--break-final)) * 2px))}
.breaker-final .kicker{color:#66e8ff;letter-spacing:.22em;text-transform:uppercase}.breaker-final h2{max-width:10ch;margin:0 auto 22px;color:#fff;font-size:clamp(3.3rem,8vw,7.4rem);line-height:.88;letter-spacing:-.078em;text-shadow:calc((1 - var(--break-final)) * 5px) 0 0 rgba(255,55,120,.16),calc((1 - var(--break-final)) * -5px) 0 0 rgba(41,221,255,.18);clip-path:inset(calc((1 - var(--break-final)) * 42%) 0)}.breaker-final p{max-width:580px;margin:0 auto 25px;color:#b9cfe1}.breaker-final .hero-actions{justify-content:center}.breaker-final .btn.secondary{border-color:rgba(171,230,255,.22);background:rgba(255,255,255,.06);color:#fff}

/* Keep the proof band visually connected to the destruction reveal. */
.proof-pulse{position:relative;z-index:5}

@media(max-width:980px){
  .cinematic-build{height:380vh}.build-experience{grid-template-columns:1fr;align-content:center;gap:24px}.build-narrative{display:grid;grid-template-columns:1fr auto;gap:14px 20px;align-items:end}.build-kicker{grid-column:1/-1;margin-bottom:0}.build-narrative h2{font-size:clamp(2.5rem,8vw,4.6rem);max-width:12ch}.build-status-wrap{margin:0;padding:0 0 4px;border-top:0;text-align:right}.build-progress-track{grid-column:1/-1}.build-device{height:min(60svh,600px);min-height:410px}.designed-hero{padding:28px}.designed-links{display:none}.template-breaker{height:265vh}.generic-site{height:min(48vh,470px);margin-top:10vh}
}

@media(max-width:640px){
  .cinematic-build{height:310vh}.cinematic-build-sticky{align-items:start;padding-top:82px}.build-experience{width:calc(100% - 28px);gap:17px}.build-narrative{grid-template-columns:1fr auto;gap:10px 12px}.build-kicker{font-size:.62rem}.build-narrative h2{font-size:clamp(2.35rem,10.5vw,3.2rem);max-width:9ch}.build-status{font-size:.64rem;max-width:18ch}.build-index{font-size:.6rem}.build-device{height:55svh;min-height:370px;border-radius:18px}.build-browser-bar{height:40px;padding-inline:10px}.build-browser-bar span{font-size:.54rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.build-canvas{inset:40px 0 0}.build-canvas::before,.build-wireframe::after{display:none}.build-wireframe{padding:15px;background-size:25px 25px}.build-wireframe::before{inset:9px}.build-wire-hero{grid-template-columns:1fr;margin-top:23px;gap:13px}.build-wire-copy{gap:8px}.build-wire-copy .wire:nth-child(2),.build-wire-copy .wire:nth-child(3){height:30px}.build-wire-media{height:118px;border-radius:12px}.designed-nav{padding:12px 13px}.designed-brand{font-size:.64rem}.designed-nav button{padding:7px 9px;font-size:.62rem}.designed-hero{grid-template-columns:1fr;padding:17px;gap:12px;align-content:start}.designed-copy small{font-size:.58rem}.designed-copy h3{font-size:clamp(1.9rem,10vw,2.75rem)}.designed-copy p{margin:9px 0;font-size:.77rem;line-height:1.35}.designed-actions span{padding:7px 9px;font-size:.6rem}.designed-product{min-height:120px;border-radius:15px}.designed-product strong{font-size:1.35rem}.build-live-badge{right:8px;bottom:8px;font-size:.53rem;padding:7px 8px}
  .template-breaker{height:225vh}.breaker-intro{top:90px;width:calc(100% - 30px)}.breaker-intro h2{font-size:clamp(2.8rem,13vw,4.35rem)}.generic-site{width:calc(100% - 28px);height:42svh;min-height:315px;margin-top:8vh}.generic-site::after{border-radius:14px}.generic-shell{border-radius:14px}.generic-top{height:38px;border-radius:14px 14px 0 0;padding-inline:10px}.generic-top span{font-size:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.generic-body{height:calc(100% - 38px);padding:14px;gap:12px}.generic-menu{display:none}.generic-hero{grid-template-columns:1fr;gap:10px}.generic-copy{gap:7px}.generic-copy span:nth-child(2),.generic-copy span:nth-child(3){height:25px}.generic-copy button{height:30px;width:100px;margin-top:2px}.generic-photo{min-height:75px}.generic-cards{gap:6px}.generic-card{height:34px}.breaker-final{width:calc(100% - 28px)}.breaker-final h2{font-size:clamp(2.8rem,12.5vw,4.25rem)}.breaker-final p{font-size:.88rem}.breaker-final .hero-actions{display:grid;grid-template-columns:1fr;gap:9px}.breaker-final .btn{width:100%}
}

@media(max-width:380px){
  .cinematic-build{height:300vh}.cinematic-build-sticky{padding-top:76px}.build-device{height:53svh;min-height:340px}.build-narrative h2{font-size:2.25rem}.build-status{font-size:.59rem}.template-breaker{height:215vh}.generic-site{min-height:290px}.breaker-final h2{font-size:2.72rem}
}

@media(prefers-reduced-motion:reduce){
  html.ctl-boot-running,html.ctl-boot-running body{overflow:auto}.ctl-boot{display:none!important}.ctl-cinematic-handoff{display:none!important}.cinematic-build,.template-breaker{height:auto}.cinematic-build-sticky,.template-breaker-sticky{position:relative;height:auto;min-height:0;padding:80px 0}.build-experience{grid-template-columns:1fr}.build-device{height:620px;transform:none!important}.build-seed-video,.build-wireframe,.build-designed{display:none}.build-live{visibility:visible!important;pointer-events:auto!important;opacity:1!important;clip-path:none!important;transform:none!important}.build-live iframe{filter:none!important;opacity:1!important}.build-live-badge{visibility:visible!important;pointer-events:auto!important;opacity:1!important;transform:none!important}.generic-site{display:none}.breaker-intro{position:relative;top:auto;left:auto;transform:none;margin:0 auto 34px;opacity:1!important}.breaker-final{visibility:visible!important;pointer-events:auto!important;position:relative;left:auto;top:auto;width:min(980px,calc(100% - 44px));margin:auto;transform:none!important}.breaker-final::before{display:none}.breaker-final-inner{opacity:1!important;transform:none!important;filter:none!important}.breaker-final h2{clip-path:none!important;text-shadow:none!important}.breaker-word{display:none}
}

/* Homepage hero: show the source video at its real brightness and color. */
.home-3d-hero::before{background:none!important}
.home-3d-hero .hero-tech-video,.home-3d-hero.video-ready .hero-tech-video{opacity:1!important;filter:none!important}
.ctl-handoff-frame video{filter:none!important}
.ctl-handoff-frame::before{background:none!important;opacity:0!important}


/* 2026-09 sharp template-breaker geometry */
.generic-site::after,
.generic-shell,
.generic-top,
.generic-logo,
.generic-menu span,
.generic-copy span,
.generic-copy button,
.generic-photo,
.generic-card,
.build-device,
.build-wire-media,
.designed-product{
  border-radius:2px!important;
}