/* SolarADS pixel-perfect-main - dedicated cinematic intro.
   Scoped CSS, deliberately separate from all other SolarADS sections. */
#solarads-intro{position:relative;width:100%;isolation:isolate;background:#060c16;color:#f0ece3;--pixel-portal-radius:0px;--pixel-portal-ring:0px;--pixel-portal-opacity:0;}
/* The intro is a viewport-fixed layer from the beginning. The document
   behind it never scrolls until the portal is finished. */
html:has(body.home){scrollbar-gutter:stable;}
html:has(body.home #solarads-intro){overflow:hidden!important;}
#solarads-intro{position:fixed!important;inset:0!important;width:100%!important;height:100svh!important;z-index:110!important;background:transparent!important;overflow:visible!important;}
#solarads-intro .pixel-intro-track{position:relative;display:block;box-sizing:border-box;height:100svh!important;min-height:0;overflow:visible;pointer-events:auto;background:#060c16;}
#solarads-intro .pixel-intro-stage{position:fixed!important;inset:0!important;top:0!important;width:100%!important;height:100svh!important;min-height:0;overflow:hidden;background:#060c16;z-index:105;box-sizing:border-box;isolation:isolate;}
/* 7.2.35 - the ORIGINAL portal technique: a transparent circle is cut out
   of the actual 3D stage; the real homepage hero is moved beneath this hole.
   No cloned hero, fullscreen cover, fake page snapshot or secondary WebGL scene. */
#solarads-intro.is-portal-opening{z-index:110;background:transparent;}
#solarads-intro.is-portal-opening .pixel-intro-track{background:transparent;}
/* Reveal the real desktop menu together with the hero THROUGH the cut-out. */
@media(min-width:1181px){
 body.home.solarads-portal-active .site-header{
  opacity:1!important;visibility:visible!important;pointer-events:none!important;
 }
}
#solarads-intro.is-portal-opening .pixel-intro-stage{
  position:fixed!important;inset:0!important;top:0!important;
  width:100%!important;height:100svh!important;max-height:none!important;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--pixel-portal-radius) - 2px),#000 var(--pixel-portal-radius));
  mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--pixel-portal-radius) - 2px),#000 var(--pixel-portal-radius));
}
#solarads-intro .pixel-intro-portal-ring{
  position:fixed;top:50%;left:50%;z-index:120;
  width:calc(var(--pixel-portal-ring) * 2);height:calc(var(--pixel-portal-ring) * 2);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  border:2px solid #ffb52e;opacity:var(--pixel-portal-opacity);
  box-shadow:0 0 0 2px rgba(255,176,0,.30),0 0 34px 8px rgba(255,176,0,.64),0 0 90px 21px rgba(255,153,0,.28),inset 0 0 38px 7px rgba(255,186,37,.28);
  will-change:width,height,opacity;
}
#solarads-intro .pixel-intro-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;}
#solarads-intro .pixel-intro-canvas canvas{display:block;width:100%!important;height:100%!important;}
#solarads-intro .pixel-intro-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,#060c16 100%);}
#solarads-intro .pixel-intro-hero{position:absolute;top:11vh;left:0;right:0;padding:0 20px;text-align:center;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;}
#solarads-intro .pixel-intro-hero img{display:block;width:auto;max-width:205px;height:28px;object-fit:contain;margin:0 auto 24px;opacity:.9;}
#solarads-intro .pixel-intro-title{margin:0;color:#f0ece3;font-family:'Space Grotesk',sans-serif;font-size:clamp(1.9rem,5.2vw,4.6rem);line-height:.95;font-weight:700;letter-spacing:-.025em;text-transform:uppercase;text-shadow:0 10px 40px rgba(0,0,0,.4);}
#solarads-intro .pixel-intro-title-line{display:block;color:#f0ece3;}
#solarads-intro .pixel-intro-title-line--second{margin-top:.30em;}
#solarads-intro .pixel-intro-title-accent,#solarads-intro .pixel-intro-flow h2 span{background:linear-gradient(120deg,#ffb000 0%,#ffcf75 55%,#ffb000 100%);color:transparent;background-clip:text;-webkit-background-clip:text;}
/* Use the exact opening-title gold gradient without the stronger final-heading text shadow tinting it. */
/* Keep the opening-title gradient. Extra painted space around the letters prevents background-clip:text from cropping the dot above Z and the tip of Y. Compensating margins retain the established heading position and spacing. */
#solarads-intro .pixel-intro-flow h2 span{display:inline-block;padding:.22em .025em .26em;margin:-.22em -.025em -.26em;line-height:1.16;vertical-align:baseline;overflow:visible;text-shadow:none;}
#solarads-intro .pixel-intro-hint{position:absolute;bottom:40px;inset-inline:0;z-index:4;pointer-events:none;text-align:center;font:500 10px/1.6 'Manrope',sans-serif;letter-spacing:.35em;text-transform:uppercase;color:#fff;text-shadow:0 2px 9px rgba(0,0,0,.75);display:flex;flex-direction:column;align-items:center;gap:12px;}
/* Scroll hint: animated mouse replaces the old vertical decorative line. */
#solarads-intro .pixel-intro-hint .pixel-intro-scroll-mouse{display:block;width:28px;height:44px;color:#ffb000;background:none;flex:0 0 auto;}
#solarads-intro .pixel-intro-scroll-mouse svg{display:block;width:100%;height:100%;overflow:visible;}
#solarads-intro .pixel-intro-scroll-wheel{transform-box:fill-box;transform-origin:center center;animation:pixel-intro-scroll-wheel-move 1.8s ease-in-out infinite;}
@keyframes pixel-intro-scroll-wheel-move{0%,8%{transform:translateY(0);opacity:1;}70%,100%{transform:translateY(5px);opacity:0;}}
#solarads-intro .pixel-intro-phrase{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px 20px;text-align:center;opacity:0;}
#solarads-intro .pixel-intro-ordinal{font:600 12px/1.5 'Space Grotesk',sans-serif;letter-spacing:.3em;color:#ffb000;text-transform:uppercase;margin:0 0 16px;}
#solarads-intro .pixel-intro-phrase h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.6rem,7vw,6.5rem);line-height:.92;letter-spacing:-.035em;text-transform:uppercase;color:#f0ece3;text-shadow:0 10px 40px rgba(0,0,0,.8);margin:0;}
#solarads-intro .pixel-intro-phrase > p:last-child{font:500 clamp(16px,1.8vw,20px)/1.55 'Manrope',sans-serif;color:#fff;max-width:460px;margin:20px auto 0;text-shadow:0 2px 6px rgba(0,0,0,.9),0 5px 24px rgba(0,0,0,.7);}
#solarads-intro .pixel-intro-flow{position:absolute;top:16vh;left:0;right:0;z-index:3;padding:0 20px;text-align:center;pointer-events:none;opacity:0;}
/* Identical cinematic text backdrop behind each of the four intro chapters and the final intro statement. */
#solarads-intro .pixel-intro-phrase::before,
#solarads-intro .pixel-intro-flow::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1040px,calc(100% - 20px));height:clamp(180px,28vh,300px);border-radius:42px;background:radial-gradient(circle at center,rgba(5,10,18,.92) 0%,rgba(5,10,18,.72) 38%,rgba(5,10,18,.32) 66%,rgba(5,10,18,0) 100%);filter:blur(6px);z-index:-1;}
#solarads-intro .pixel-intro-flow h2{max-width:980px;margin:0 auto;padding-bottom:.2em;color:#f0ece3;font:700 clamp(2.1rem,4.8vw,4.25rem)/1.08 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:-.025em;text-shadow:0 10px 32px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.8);overflow:visible;}
#solarads-intro .pixel-intro-flow ol{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;font:600 12px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.16em;color:#fff;text-shadow:0 2px 9px rgba(0,0,0,.75);}
#solarads-intro .pixel-intro-flow li{display:flex;gap:16px;align-items:center;}
#solarads-intro .pixel-intro-flow li span{padding:8px 14px;border:1px solid rgba(255,176,0,.55);border-radius:999px;background:rgba(6,12,22,.82);backdrop-filter:blur(7px);box-shadow:0 10px 24px rgba(0,0,0,.26);}
#solarads-intro .pixel-intro-flow li b{display:inline-flex;align-items:center;justify-content:center;color:#ffb000;}
#solarads-intro .pixel-intro-flow li b svg{display:block;width:18px;height:18px;stroke-width:2;}
#solarads-intro .pixel-intro-flash{position:absolute;width:60vmax;height:60vmax;left:50%;top:50%;transform:translate(-50%,-50%) scale(.2);border-radius:50%;background:radial-gradient(circle,#ffcf75 0%,#ffb000 30%,transparent 70%);z-index:5;pointer-events:none;opacity:0;}
#solarads-intro .pixel-intro-veil{position:absolute;inset:0;z-index:6;background:#071321;pointer-events:none;opacity:0;}
#solarads-intro .pixel-intro-skip{position:absolute;bottom:32px;right:32px;z-index:10;border:1px solid rgba(240,236,227,.2);border-radius:99px;background:rgba(6,12,22,.5);padding:9px 16px;backdrop-filter:blur(8px);font:500 11px/1.4 'Manrope',sans-serif;letter-spacing:.25em;text-transform:uppercase;color:rgba(240,236,227,.72);cursor:pointer;transition:color .2s,border-color .2s;}
#solarads-intro .pixel-intro-skip:hover,#solarads-intro .pixel-intro-skip:focus-visible{border-color:#ffb000;color:#ffb000;}
/* If WebGL is unavailable, keep a readable static opening and the skip control. */
#solarads-intro .pixel-intro-track.is-static{display:block!important;height:100svh!important;}
#solarads-intro .pixel-intro-fallback .pixel-intro-canvas{display:none;}
#solarads-intro .pixel-intro-fallback .pixel-intro-hint{display:none;}
#solarads-intro .pixel-intro-fallback .pixel-intro-hero{top:30%;}
#solarads-intro .pixel-intro-fallback .pixel-intro-vignette{background:radial-gradient(circle at 50% 50%,rgba(255,176,0,.1),#060c16 75%);}
@media (max-width:767px){
  #solarads-intro .pixel-intro-hero{top:13vh;}
  #solarads-intro .pixel-intro-hero img{height:24px;margin-bottom:24px;}
  #solarads-intro .pixel-intro-title{font-size:clamp(1.9rem,5.2vw,4.6rem);line-height:.98;}
  #solarads-intro .pixel-intro-hint{bottom:40px;}
  #solarads-intro .pixel-intro-skip{right:20px;}
  #solarads-intro .pixel-intro-phrase::before,#solarads-intro .pixel-intro-flow::before{width:calc(100% - 12px);height:220px;border-radius:32px;filter:blur(4px);}
  /* Four stages on ONE line, including all three connector arrows. */
  #solarads-intro .pixel-intro-flow{padding-inline:clamp(8px,3vw,16px);}
  #solarads-intro .pixel-intro-flow ol{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    width:100%;max-width:520px;gap:clamp(2px,.7vw,5px);
    margin:clamp(18px,3svh,28px) auto 0;
    padding:0;font-size:clamp(8px,2.45vw,10px);
    letter-spacing:.025em;white-space:nowrap;
  }
  #solarads-intro .pixel-intro-flow li{
    display:flex;min-width:0;align-items:center;justify-content:center;
    gap:clamp(2px,.65vw,5px);white-space:nowrap;
  }
  #solarads-intro .pixel-intro-flow li span{
    box-sizing:border-box;min-width:0;padding:7px clamp(3px,1.2vw,7px);
    white-space:nowrap;backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
  }
  #solarads-intro .pixel-intro-flow li b{flex:0 0 10px;}
  #solarads-intro .pixel-intro-flow li b svg{width:10px;height:10px;stroke-width:2;}
}
@media (prefers-reduced-motion:reduce){#solarads-intro .pixel-intro-scroll-wheel{animation:none;}}
