/* TheAppGuy V3 cinematic / October 2026 / self-contained intro only */
#tagIntro[hidden]{display:none!important}
#tagIntro{--ice:#a7e9ff;--blue:#318fff;position:fixed;inset:0;z-index:2147483000;isolation:isolate;
display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;min-height:320px;overflow:hidden;
background:#030608;color:#f9fcff;font:500 16px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
opacity:1;transition:opacity 1.45s cubic-bezier(.35,0,.25,1),filter 1.45s ease}
#tagIntro *,#tagIntro *:before,#tagIntro *:after{box-sizing:border-box}
#tagIntro.is-leaving{opacity:0;filter:blur(6px);pointer-events:none}
#tagIntro .cin-rack{position:absolute;inset:-4%;z-index:-3;pointer-events:none;
background:linear-gradient(90deg,#030508 4%,rgba(3,6,11,.98) 20%,rgba(3,6,11,.70) 43%,rgba(3,7,12,.33) 68%,rgba(1,5,10,.46) 100%),
linear-gradient(0deg,#020407 0%,transparent 33%,rgba(0,0,0,.18) 80%),
url('/static/tag-intro-racks-20261015-optimized.webp?v=1') 73% center/cover no-repeat;
animation:cin-photo 5s cubic-bezier(.14,.6,.36,1) both}
#tagIntro .cin-rack:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(20,119,204,.12) 60%,transparent 92%);
mix-blend-mode:screen}
#tagIntro .cin-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;
background:radial-gradient(ellipse 74% 94% at 95% 47%,rgba(14,53,91,.04),transparent 70%),repeating-linear-gradient(0deg,transparent 0px,transparent 5px,rgba(1,5,11,.065) 6px);
opacity:.75}
#tagIntro .cin-beam{position:absolute;top:0;bottom:0;left:-150%;width:38%;z-index:1;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(43,138,240,.015) 48%,rgba(127,212,255,.19) 50%,rgba(55,140,216,.01) 52%,transparent);
transform:skewX(-17deg);animation:cin-beam 2.3s .95s ease-in-out both}
#tagIntro .cin-border{position:absolute;inset:0;z-index:1;pointer-events:none;border:1px solid rgba(168,199,236,.055)}
#tagIntro .cin-border:before{content:"";position:absolute;top:88px;left:clamp(22px,5.6vw,105px);right:clamp(22px,5.6vw,105px);height:1px;background:linear-gradient(90deg,rgba(149,185,214,.27),rgba(116,170,210,.14) 50%,transparent)}
#tagIntro .cin-header{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:28px;
min-height:89px;padding:16px clamp(22px,5.6vw,105px);opacity:0;animation:cin-rise .7s .12s both}
#tagIntro .cin-brand{display:flex;align-items:center;gap:24px;min-width:0}
#tagIntro .cin-logo{width:clamp(133px,12.8vw,188px);max-height:51px;height:auto;object-fit:contain}
#tagIntro .cin-separator{width:1px;height:24px;background:rgba(153,198,231,.37)}
#tagIntro .cin-brand-note{font:700 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;color:#8eacc6;white-space:nowrap}
#tagIntro .cin-header-end{display:flex;align-items:center;gap:26px}
#tagIntro .cin-country{font:650 10px/1.3 ui-monospace,Consolas,monospace;color:#87a4bf;letter-spacing:.13em;white-space:nowrap}
#tagIntro .cin-skip{background:rgba(3,9,16,.42);border:1px solid rgba(171,202,225,.35);border-radius:3px;cursor:pointer;color:#e8f3fc;
padding:12px 15px;font:700 10px/1 ui-monospace,Consolas,monospace;letter-spacing:.1em;white-space:nowrap;transition:background .2s,border-color .2s}
#tagIntro .cin-skip:hover{background:rgba(45,126,191,.27);border-color:#9bdefa}
#tagIntro .cin-skip:focus-visible{outline:3px solid #67cbff;outline-offset:3px}
#tagIntro .cin-main{position:relative;z-index:2;flex:1;display:flex;align-items:center;min-height:0;
padding:30px clamp(22px,5.6vw,105px) 22px;width:100%}
#tagIntro .cin-copy{width:min(990px,100%);margin-top:-2vh}
#tagIntro .cin-kicker{margin:0 0 clamp(18px,3vh,32px);display:flex;align-items:center;gap:12px;
font:800 clamp(10px,.95vw,13px)/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#76cef5;letter-spacing:.27em;
text-transform:uppercase;opacity:0;animation:cin-rise .55s .55s both}
#tagIntro .cin-kicker:before{content:"";width:26px;height:2px;background:#54aefe}
#tagIntro .cin-title{display:block;margin:0;font-size:clamp(66px,10vw,160px);font-weight:900;letter-spacing:-.085em;
line-height:.91;text-transform:uppercase;white-space:nowrap}
#tagIntro .cin-title .cin-line{display:block;width:max-content;max-width:100%;opacity:0;transform:translateY(48px);clip-path:inset(0 0 100% 0);
animation:cin-title-in .8s cubic-bezier(.17,.86,.24,1) forwards}
#tagIntro .cin-title .cin-line:first-child{animation-delay:.77s}
#tagIntro .cin-title .cin-line:last-child{animation-delay:1.25s}
#tagIntro .cin-title .cin-accent{color:#78c7f6;text-shadow:0 0 50px rgba(52,151,229,.21)}
#tagIntro .cin-sub{width:min(545px,80vw);max-width:100%;margin:clamp(21px,3.6vh,39px) 0 0;
font-size:clamp(14px,1.25vw,19px);font-weight:500;line-height:1.65;color:#c1cedc;
opacity:0;animation:cin-rise .65s 2.03s both}
#tagIntro .cin-sub strong{color:#f2f8ff;font-weight:800}
#tagIntro .cin-right-index{position:absolute;right:clamp(22px,5.6vw,105px);bottom:clamp(32px,6vh,68px);
color:#a2b6c8;letter-spacing:.22em;font:700 10px/1.6 ui-monospace,Consolas,monospace;
text-align:right;opacity:0;animation:cin-rise .55s 2.9s both}
#tagIntro .cin-right-index:before{content:"";display:block;width:60px;height:2px;background:#549bce;margin:0 0 10px auto}
#tagIntro .cin-bottom{position:relative;z-index:4;flex-shrink:0;padding:0 clamp(22px,5.6vw,105px) clamp(19px,3.2vh,34px)}
#tagIntro .cin-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(181,205,221,.3);
border-bottom:1px solid rgba(181,205,221,.3);margin:0 0 clamp(16px,2.4vh,24px);padding:19px 0 18px;gap:0}
#tagIntro .cin-product{display:flex;align-items:center;gap:12px;min-width:0;padding:4px clamp(8px,1.5vw,24px);
border-right:1px solid rgba(176,202,222,.21);opacity:0;animation:cin-prod .55s ease-out forwards}
#tagIntro .cin-product:first-child{padding-left:0;animation-delay:2.3s}
#tagIntro .cin-product:nth-child(2){animation-delay:2.52s}
#tagIntro .cin-product:nth-child(3){animation-delay:2.74s}
#tagIntro .cin-product:nth-child(4){animation-delay:2.96s;border-right:0}
#tagIntro .cin-num{font:700 10px/1 ui-monospace,Consolas,monospace;color:#5caeff}
#tagIntro .cin-product strong{font-size:clamp(11px,1.12vw,15px);font-weight:850;letter-spacing:.025em;line-height:1.2}
#tagIntro .cin-foot{display:flex;align-items:center;gap:16px}
#tagIntro .cin-foot-label{white-space:nowrap;font:750 10px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.14em;color:#7e9bb4}
#tagIntro .cin-track{height:2px;flex:1;position:relative;background:rgba(132,171,208,.22);overflow:hidden}
#tagIntro .cin-track:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#177fe7,#a7e8ff);transform:scaleX(0);transform-origin:left;animation:cin-progress 5s linear forwards}
#tagIntro .cin-time{font:700 10px/1.2 ui-monospace,Consolas,monospace;color:#9cb1c6;white-space:nowrap}
@keyframes cin-rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes cin-title-in{to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}
@keyframes cin-photo{from{transform:scale(1.1);filter:contrast(1.2) saturate(.62) blur(3px)}to{transform:scale(1);filter:contrast(1.13) saturate(.7) blur(0)}}
@keyframes cin-beam{from{left:-150%}to{left:180%}}
@keyframes cin-prod{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes cin-progress{to{transform:scaleX(1)}}
@media(max-width:1080px){
 #tagIntro .cin-title{font-size:clamp(61px,10vw,112px)}
 #tagIntro .cin-rack{background-position:64% center}
 #tagIntro .cin-country{display:none}
}
@media(max-width:720px){
 #tagIntro .cin-header{min-height:76px}
 #tagIntro .cin-border:before{top:76px}
 #tagIntro .cin-logo{width:150px}
 #tagIntro .cin-separator,#tagIntro .cin-brand-note{display:none}
 #tagIntro .cin-rack{background:linear-gradient(90deg,rgba(2,4,7,.9),rgba(1,4,9,.59) 60%,rgba(1,4,8,.64)),linear-gradient(0deg,#030507 4%,transparent 46%),url('/static/tag-intro-racks-20261015-optimized.webp?v=1') 60% center/cover no-repeat}
 #tagIntro .cin-main{align-items:center;padding-block:12px;min-height:0}
 #tagIntro .cin-copy{margin-top:-6vh}
 #tagIntro .cin-title{font-size:clamp(49px,11.4vw,81px);white-space:nowrap;line-height:.98}
 #tagIntro .cin-kicker{letter-spacing:.14em;font-size:10px;gap:7px;margin-bottom:16px}
 #tagIntro .cin-kicker:before{width:16px}
 #tagIntro .cin-sub{width:320px;margin-top:22px;font-size:13px;line-height:1.5}
 #tagIntro .cin-right-index{display:none}
 #tagIntro .cin-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;padding-block:17px}
 #tagIntro .cin-product{padding:8px 2px 8px 0;gap:8px;border:0}
 #tagIntro .cin-product strong{font-size:clamp(10px,3vw,13px);white-space:nowrap}
 #tagIntro .cin-num{font-size:9px}
 #tagIntro .cin-bottom{padding-bottom:19px}
 #tagIntro .cin-foot-label{font-size:9px}
}
@media(max-width:380px){
 #tagIntro .cin-title{font-size:11.3vw}
 #tagIntro .cin-product strong{font-size:10px}
 #tagIntro .cin-skip{padding:11px 10px}
 #tagIntro .cin-logo{width:130px}
 #tagIntro .cin-products{gap:4px 8px;padding-block:12px}
}
@media(max-height:620px){
 #tagIntro .cin-header{min-height:62px;padding-block:7px}
 #tagIntro .cin-border:before{top:62px}
 #tagIntro .cin-copy{margin-top:0}
 #tagIntro .cin-title{font-size:clamp(39px,11vh,90px)}
 #tagIntro .cin-kicker{margin-bottom:8px}
 #tagIntro .cin-sub{margin-top:10px;font-size:12px;line-height:1.4}
 #tagIntro .cin-products{padding-block:9px;margin-bottom:8px}
 #tagIntro .cin-bottom{padding-bottom:8px}
}
@media(prefers-reduced-motion:reduce){#tagIntro,#tagIntro *{animation:none!important;transition:none!important}}

/* Subdued cinematic skip focus treatment; keyboard visibility preserved. */
#tagIntro .cin-skip:focus-visible{outline:1px solid rgba(155,196,226,.75);outline-offset:2px}