/* =========================================================
   RADIO ILLUMINATI — GP CHILD v0.6
   The existing visual world, moved out of Elementor.
   ========================================================= */
:root{color-scheme:dark;}
html,body{margin:0;padding:0;background:#000;color:#fff;}
body.radio-illuminati-front{overflow-x:hidden;font-family:Arial,Helvetica,sans-serif;}
body.radio-illuminati-front.admin-bar .ri-site-nav{top:auto;}
@media(max-width:782px){body.radio-illuminati-front.admin-bar .ri-site-nav{top:auto;}}
*,*::before,*::after{box-sizing:border-box;}
img,video,canvas,iframe{max-width:100%;}
.ri-skip-link{position:fixed;left:12px;top:12px;z-index:99999;padding:10px 14px;background:#fff;color:#000;transform:translateY(-180%);transition:transform .2s ease;text-decoration:none;font-weight:700;}
.ri-skip-link:focus{transform:none;}

/* NAV — OLD RADIO ILLUMINATI SOUL / clean GeneratePress chassis */
.ri-site-nav{
  position:relative;
  z-index:1000;
  width:100%;
  height:54px;
  min-height:54px;
  display:flex;
  align-items:center;
  padding:0 18px;
  background:#000;
  border-bottom:3px solid #9c0000;
}
.ri-nav-mark{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  color:#fff;
  text-decoration:none;
}
.ri-nav-logo{
  display:block;
  width:42px;
  height:auto;
}
.ri-nav-links{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  white-space:nowrap;
}
.ri-nav-links a{
  position:relative;
  color:rgba(255,255,255,.94);
  text-decoration:none;
  font-size:20px;
  font-weight:400;
  line-height:1;
  letter-spacing:.15em;
  text-transform:uppercase;
  transition:color .16s ease;
}
.ri-nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:.15em;
  bottom:-10px;
  height:2px;
  background:#9c0000;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .16s ease;
}
.ri-nav-links a:hover,
.ri-nav-links a:focus-visible{
  color:#9c0000;
}
.ri-nav-links a:hover::after,
.ri-nav-links a:focus-visible::after{
  transform:scaleX(1);
}
.ri-nav-links a[aria-current="page"]{
  color:rgba(255,255,255,.94);
}
.ri-nav-links a[aria-current="page"]::after{
  transform:scaleX(0);
}
.ri-nav-mobile{display:none;position:relative;margin-left:auto;}
.ri-nav-mobile summary{list-style:none;cursor:pointer;color:#fff;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;}
.ri-nav-mobile summary::-webkit-details-marker{display:none;}
.ri-nav-mobile-panel{position:absolute;right:0;top:30px;min-width:190px;padding:12px;background:rgba(0,0,0,.96);border:1px solid rgba(255,255,255,.12);}
.ri-nav-mobile-panel a{display:block;padding:10px 8px;color:#fff;text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
@media(max-width:767px){
  .ri-site-nav{position:absolute;height:58px;min-height:58px;padding:0 17px;border-bottom-color:rgba(156,0,0,.90);}
  .ri-nav-logo{width:38px;}
  .ri-nav-mark{width:40px;height:44px;}
  .ri-nav-links{display:none;}
  .ri-nav-mobile{display:block;}
}

/* =========================================================
   HERO v0.6 — PIXEL MATCH
   HTML structure + local 168 KB neon-pyramid WebM.
   The film owns the vortex; HTML owns brand, copy and nav.
   ========================================================= */
.ri-hero{
  position:relative;
  width:100%;
  height:calc(100svh - 54px);
  min-height:620px;
  overflow:hidden;
  background:#000;
  isolation:isolate;
}
/* The old hero is framed by the brand-red thread. Use an inset
   layer rather than a border so the lower pixel can never disappear
   behind the following full-bleed section. */
.ri-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:20;
  height:3px;
  background:#9c0000;
  pointer-events:none;
}
/* WordPress' admin bar is inside the visual viewport. Compensate for it
   on SUB7 so the hero still ends on-screen exactly like the public page. */
body.radio-illuminati-front.admin-bar .ri-hero{
  height:calc(100svh - 54px - 32px);
}
@media(max-width:782px){
  body.radio-illuminati-front.admin-bar .ri-hero{
    height:calc(100svh - 58px - 46px);
  }
}
.ri-hero-video{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:50% 50%;
  background:#000;
}
.ri-hero-shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.02),transparent 42%,rgba(0,0,0,.05));
}
.ri-hero-vignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 61%,rgba(0,0,0,.10) 100%);
}
.ri-hero-content{
  position:absolute;
  inset:0;
  z-index:2;
  text-align:center;
  pointer-events:none;
}
.ri-hero-logo{
  position:absolute;
  left:50%;
  top:44.8%;
  display:block;
  width:min(50vw,960px);
  height:auto;
  max-width:none;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 10px rgba(47,151,255,.16));
}
.ri-hero-tagline{
  position:absolute;
  left:50%;
  top:67.3%;
  transform:translateX(-50%);
  width:max-content;
  margin:0;
  color:rgba(255,255,255,.94);
  font-size:clamp(16px,1.02vw,18px);
  font-weight:400;
  line-height:1.2;
  letter-spacing:.59em;
  text-transform:lowercase;
  text-shadow:0 2px 18px rgba(0,0,0,.95);
}
@media(max-width:1280px) and (min-width:768px){
  .ri-nav-links{gap:12px;}
  .ri-nav-links a{font-size:18px;}
  .ri-hero-logo{width:min(53.5vw,840px);top:45.2%;}
  .ri-hero-tagline{top:67.6%;font-size:16px;letter-spacing:.55em;}
}
@media(max-width:767px){.ri-hero{display:none!important;}}
@media(prefers-reduced-motion:reduce){.ri-hero-video{display:none;}}

/* The widget was previously full-bleed inside Elementor. Here it already
   lives in a true full-width template, so remove the old compensation. */
#ri-home-engine,#ri-mobile-home{margin-left:0!important;width:100%!important;}

/* =========================================================    RADIO ILLUMINATI — HOME ENGINE v1.0    one widget / staged assets / deferred YouTube    ========================================================= */  #ri-home-engine, #ri-home-engine *{   box-sizing:border-box; }  #ri-home-engine{   position:relative;   width:100vw;   margin-left:calc(50% - 50vw);   padding:0;   overflow:hidden;   background:#000;   color:#fff;   isolation:isolate; }  #ri-desktop-home{   display:block;   width:100%;   background:#000; }
#ri-desktop-spaceship{   position:relative;   width:100%;   margin:0;   padding:0;   overflow:hidden;   background:#000; }  #ri-desktop-spaceship img{   display:block;   width:100%;   height:auto;   margin:0;   padding:0; }  #ri-sean-youtube > iframe, #ri-sean-player, #ri-vivamas-youtube > iframe, #ri-vivamas-player{   width:100%;   height:100%;   display:block;   border:0;   background:#000; }  @media(max-width:767px){   #ri-desktop-home{     display:none !important;   } }  @media(min-width:768px){   #ri-mobile-home{     display:none !important;   } }   #ri-mobile-home, #ri-mobile-home *{   box-sizing:border-box; }  #ri-mobile-home{   display:none; }  @media(max-width:767px){   #scroll-top{ display:none !important; }     /* =======================================================      MOBILE PAGE      ======================================================= */    #ri-mobile-home{     display:block;     position:relative;      width:100vw;     margin-left:calc(50% - 50vw);      overflow:hidden;      background:#020202;     color:#fff;      font-family:       Arial,       Helvetica,       sans-serif;      isolation:isolate;   }    #ri-mobile-home a{     color:inherit;   }    #ri-mobile-home img{     max-width:none;   }     /* =======================================================      SHARED      ======================================================= */    #ri-mobile-home .ri-m-section{     position:relative;     width:100%;   }    #ri-mobile-home .ri-m-eyebrow{     margin:0 0 14px;      color:rgba(255,255,255,.62);      font-size:10px;     font-weight:600;     line-height:1.3;      letter-spacing:.28em;     text-transform:uppercase;   }    #ri-mobile-home .ri-m-redline{     width:34px;     height:2px;      margin:0 0 22px;      background:#9c0000;   }    #ri-mobile-home .ri-m-reveal{     opacity:0;      transform:       translateY(18px);      transition:       opacity .72s ease,       transform .72s ease;   }    #ri-mobile-home .ri-m-reveal.is-visible{     opacity:1;     transform:none;   }     /* =======================================================      01 — OPENING      ======================================================= */    #ri-mobile-home .ri-m-opening{     min-height:76svh;      overflow:hidden;      background:#050505;      isolation:isolate;   }    #ri-mobile-home .ri-m-opening-media{     position:absolute;     inset:0;      z-index:0;   }    #ri-mobile-home .ri-m-opening-media img{     display:block;      width:100%;     height:100%;      object-fit:cover;      object-position:       50% 50%;      transform:       scale(1.02);   }    #ri-mobile-home .ri-m-opening-shade{     position:absolute;     inset:0;      z-index:1;      pointer-events:none;      background:       linear-gradient(         to bottom,         rgba(0,0,0,.03) 0%,         rgba(0,0,0,.02) 38%,         rgba(0,0,0,.30) 62%,         rgba(0,0,0,.92) 100%       );   }    #ri-mobile-home .ri-m-opening-vignette{     position:absolute;     inset:0;      z-index:1;      pointer-events:none;      background:       radial-gradient(         ellipse at center,         transparent 48%,         rgba(0,0,0,.24) 100%       );   }    #ri-mobile-home .ri-m-opening-copy{     position:absolute;      left:0;     right:0;     bottom:0;      z-index:2;      padding:       0       clamp(22px,7vw,34px)       clamp(42px,12vw,64px);   }    #ri-mobile-home .ri-m-opening h1{     max-width:10ch;      margin:0;      color:#fff;      font-size:       clamp(         38px,         12vw,         62px       );      font-weight:500;      line-height:.94;      letter-spacing:.025em;      text-transform:uppercase;      text-shadow:       0 3px 26px       rgba(0,0,0,.82);   }    #ri-mobile-home .ri-m-scroll{     display:inline-flex;      align-items:center;      gap:12px;      margin-top:27px;      color:rgba(255,255,255,.82);      text-decoration:none;      font-size:10px;     font-weight:600;     line-height:1;      letter-spacing:.24em;     text-transform:uppercase;   }    #ri-mobile-home .ri-m-scroll::after{     content:"";      display:block;      width:45px;     height:1px;      background:#9c0000;   }     /* =======================================================      02 — SIGNAL      ======================================================= */    #ri-mobile-home .ri-m-signal{     padding:       clamp(76px,20vw,108px)       clamp(22px,7vw,34px)       clamp(80px,21vw,112px);      background:       radial-gradient(         circle at 80% 15%,         rgba(156,0,0,.12),         transparent 32%       ),       #020202;   }    #ri-mobile-home .ri-m-signal h2{     max-width:9ch;      margin:0;      color:#fff;      font-size:       clamp(         31px,         9.4vw,         48px       );      font-weight:500;      line-height:1.02;      letter-spacing:.035em;      text-transform:uppercase;   }    #ri-mobile-home .ri-m-signal-copy{     max-width:30ch;      margin:22px 0 0;      color:rgba(255,255,255,.56);      font-size:12px;     line-height:1.78;      letter-spacing:.13em;      text-transform:uppercase;   }    #ri-mobile-home .ri-m-signal-grid{     display:grid;      grid-template-columns:       repeat(3,1fr);      gap:8px;      margin-top:45px;   }    #ri-mobile-home .ri-m-signal-cell{     position:relative;      display:flex;      align-items:flex-end;      min-height:92px;      padding:12px;      overflow:hidden;      border:       1px solid       rgba(255,255,255,.12);      color:rgba(255,255,255,.54);      font-family:       "Courier New",       monospace;      font-size:9px;     line-height:1.35;      letter-spacing:.12em;      text-transform:uppercase;   }    #ri-mobile-home .ri-m-signal-cell::before{     content:"";      position:absolute;      left:0;     right:0;     top:0;      height:1px;      background:       linear-gradient(         to right,         transparent,         rgba(156,0,0,.85),         transparent       );      animation:       riSignalScan       4.4s linear       infinite;   }    #ri-mobile-home .ri-m-signal-cell:nth-child(2)::before{     animation-delay:-1.4s;   }    #ri-mobile-home .ri-m-signal-cell:nth-child(3)::before{     animation-delay:-2.7s;   }    @keyframes riSignalScan{     0%{       transform:translateY(0);       opacity:0;     }      10%{       opacity:1;     }      85%{       opacity:.55;     }      100%{       transform:translateY(91px);       opacity:0;     }   }     /* =======================================================      03 — MUSIC      ONE AND ONLY MUSIC CTA      ======================================================= */    #ri-mobile-home .ri-m-music{     background:#000;   }    #ri-mobile-home .ri-m-music-link{     position:relative;      display:block;      width:100%;     min-height:78svh;      overflow:hidden;      color:#fff;      text-decoration:none;      isolation:isolate;   }    #ri-mobile-home .ri-m-music-media{     position:absolute;     inset:0;      z-index:0;   }    #ri-mobile-home .ri-m-music-media img{     display:block;      width:100%;     height:100%;      object-fit:cover;      object-position:       50% 50%;      transform:       scale(1.02);      transition:       transform       1.1s ease;   }    #ri-mobile-home .ri-m-music-link:active   .ri-m-music-media img{     transform:       scale(1.045);   }    #ri-mobile-home .ri-m-music-shade{     position:absolute;     inset:0;      z-index:1;      pointer-events:none;      background:       linear-gradient(         to bottom,         rgba(0,0,0,.12) 0%,         rgba(0,0,0,.01) 37%,         rgba(0,0,0,.22) 57%,         rgba(0,0,0,.92) 100%       );   }    #ri-mobile-home .ri-m-music-copy{     position:absolute;      left:0;     right:0;     bottom:0;      z-index:2;      padding:       0       clamp(22px,7vw,34px)       clamp(44px,12vw,66px);   }    #ri-mobile-home .ri-m-music h2{     margin:0;      color:#fff;      font-size:       clamp(         48px,         15vw,         76px       );      font-weight:500;      line-height:.91;      letter-spacing:.025em;      text-transform:uppercase;   }    #ri-mobile-home .ri-m-music-action{     display:flex;      align-items:center;      justify-content:       space-between;      gap:20px;      margin-top:25px;      padding-top:18px;      border-top:       1px solid       rgba(255,255,255,.23);      color:#fff;      font-size:11px;     font-weight:600;     line-height:1.2;      letter-spacing:.20em;      text-transform:uppercase;   }    #ri-mobile-home .ri-m-arrow{     flex:0 0 auto;      color:#9c0000;      font-size:23px;     line-height:1;   }     /* =======================================================      CONTROLLED MOBILE HEADLINE LINES — V3      Prevents premium display words from being split mid-word.      ======================================================= */    #ri-mobile-home .ri-m-title-line{     display:block;     white-space:nowrap;     overflow-wrap:normal;     word-break:normal;     hyphens:none;   }     /* =======================================================      04 — ARCHIVE INTERLUDE      STILL IMAGE ONLY / NO YOUTUBE      ======================================================= */    #ri-mobile-home .ri-m-archive{     position:relative;      min-height:68svh;      overflow:hidden;      background:#050505;      isolation:isolate;   }    #ri-mobile-home .ri-m-archive-media{     position:absolute;     inset:0;      z-index:0;   }    #ri-mobile-home .ri-m-archive-media img{     display:block;      width:100%;     height:100%;      object-fit:cover;      object-position:       72% 50%;      transform:       scale(1.025);   }    #ri-mobile-home .ri-m-archive-shade{     position:absolute;     inset:0;      z-index:1;      pointer-events:none;      background:       linear-gradient(         to bottom,         rgba(0,0,0,.10) 0%,         rgba(0,0,0,.12) 44%,         rgba(0,0,0,.91) 100%       );   }    #ri-mobile-home .ri-m-archive-copy{     position:absolute;      left:0;     right:0;     bottom:0;      z-index:2;      padding:       0       clamp(22px,7vw,34px)       clamp(43px,12vw,64px);   }    #ri-mobile-home .ri-m-archive h2{     max-width:none;      margin:0;      color:#fff;      font-size:       clamp(         30px,         9.3vw,         48px       );      font-weight:500;      line-height:1.01;      letter-spacing:.04em;      text-transform:uppercase;   }    #ri-mobile-home .ri-m-archive-meta{     margin:20px 0 0;      color:rgba(255,255,255,.57);      font-family:       "Courier New",       monospace;      font-size:10px;     line-height:1.7;      letter-spacing:.12em;      text-transform:uppercase;   }     /* =======================================================      05 — SENTIENT AI      CSS / TEXT ONLY      ======================================================= */    #ri-mobile-home .ri-m-ai{     position:relative;      /*       V3 MOBILE TIGHTENING:       slightly less air above the terminal so the archive -> AI       transition keeps moving without losing the cinematic pause.     */     padding:       clamp(66px,18vw,96px)       clamp(22px,7vw,34px)       clamp(82px,22vw,118px);      overflow:hidden;      background:       linear-gradient(         180deg,         #020202 0%,         #050505 100%       );   }    #ri-mobile-home .ri-m-ai::before{     content:"";      position:absolute;      inset:0;      opacity:.17;      pointer-events:none;      background-image:       linear-gradient(         rgba(255,255,255,.05) 1px,         transparent 1px       ),       linear-gradient(         90deg,         rgba(255,255,255,.05) 1px,         transparent 1px       );      background-size:       28px 28px;   }    #ri-mobile-home .ri-m-ai-inner{     position:relative;      z-index:1;   }    #ri-mobile-home .ri-m-terminal{     position:relative;      margin-bottom:42px;      padding:       18px 17px 21px;      border:       1px solid       rgba(255,255,255,.14);      background:       rgba(0,0,0,.56);      font-family:       "Courier New",       monospace;   }    #ri-mobile-home .ri-m-terminal-top{     display:flex;      align-items:center;      gap:6px;      margin-bottom:19px;   }    #ri-mobile-home .ri-m-dot{     width:6px;     height:6px;      border-radius:50%;      background:       rgba(255,255,255,.34);   }    #ri-mobile-home .ri-m-dot:first-child{     background:#9c0000;   }    #ri-mobile-home .ri-m-terminal-line{     margin:0 0 7px;      color:       rgba(255,255,255,.70);      font-size:10px;     line-height:1.55;      letter-spacing:.10em;      text-transform:uppercase;   }    #ri-mobile-home .ri-m-terminal-line   .ri-m-terminal-red{     color:#b80000;   }    #ri-mobile-home .ri-m-cursor{     display:inline-block;      width:7px;     height:12px;      margin-left:4px;      vertical-align:-2px;      background:#fff;      animation:       riCursorBlink       1s steps(1)       infinite;   }    @keyframes riCursorBlink{     0%,     48%{       opacity:1;     }      49%,     100%{       opacity:0;     }   }    #ri-mobile-home .ri-m-ai h2{     max-width:none;      margin:0;      color:#fff;      font-size:       clamp(         38px,         11vw,         58px       );      font-weight:500;      line-height:.95;      letter-spacing:.025em;      text-transform:uppercase;   }    #ri-mobile-home .ri-m-ai-copy{     max-width:30ch;      margin:22px 0 0;      color:       rgba(255,255,255,.55);      font-size:12px;     line-height:1.75;      letter-spacing:.11em;      text-transform:uppercase;   }    #ri-mobile-home .ri-m-ai-link{     display:flex;      align-items:center;      justify-content:       space-between;      gap:20px;      margin-top:33px;      padding:       19px 0;      border-top:       1px solid       rgba(255,255,255,.18);      border-bottom:       1px solid       rgba(255,255,255,.18);      color:#fff;      text-decoration:none;      font-size:11px;     font-weight:600;     line-height:1.2;      letter-spacing:.20em;      text-transform:uppercase;   }     /* =======================================================      06 — C0NTACT / OUTRO      ======================================================= */    #ri-mobile-home .ri-m-outro{     position:relative;      display:flex;      min-height:64svh;      align-items:flex-end;      padding:       clamp(80px,22vw,118px)       clamp(22px,7vw,34px)       clamp(48px,13vw,72px);      overflow:hidden;      background:       radial-gradient(         circle at 85% 15%,         rgba(156,0,0,.18),         transparent 36%       ),       #020202;   }    #ri-mobile-home .ri-m-outro-inner{     width:100%;   }    #ri-mobile-home .ri-m-outro h2{     margin:0;      color:#fff;      font-size:       clamp(         50px,         16vw,         82px       );      font-weight:500;      line-height:.90;      letter-spacing:.025em;      text-transform:uppercase;   }    #ri-mobile-home .ri-m-contact-link{     display:flex;      align-items:center;      justify-content:       space-between;      gap:20px;      margin-top:31px;      padding:       20px 0;      border-top:       1px solid       rgba(255,255,255,.20);      border-bottom:       1px solid       rgba(255,255,255,.20);      color:#fff;      text-decoration:none;      font-size:11px;     font-weight:600;     line-height:1.2;      letter-spacing:.20em;      text-transform:uppercase;   }    #ri-mobile-home .ri-m-signoff{     margin-top:48px;      color:       rgba(255,255,255,.28);      font-size:9px;     line-height:1.55;      letter-spacing:.24em;      text-transform:uppercase;   }     /* =======================================================      SMALL PHONES      ======================================================= */    @media(max-width:420px){      #ri-mobile-home .ri-m-opening{       min-height:72svh;     }      #ri-mobile-home .ri-m-music-link{       min-height:73svh;     }      #ri-mobile-home .ri-m-archive{       min-height:64svh;     }      #ri-mobile-home .ri-m-signal-grid{       gap:6px;     }      #ri-mobile-home .ri-m-signal-cell{       min-height:82px;        padding:10px;        font-size:8px;     }    }     /* =======================================================      REDUCED MOTION      ======================================================= */    @media(prefers-reduced-motion:reduce){      #ri-mobile-home *,     #ri-mobile-home *::before,     #ri-mobile-home *::after{       animation-duration:.01ms !important;       transition-duration:.01ms !important;     }      #ri-mobile-home .ri-m-reveal{       opacity:1;       transform:none;     }    }  }   /* =========================================================    RADIO ILLUMINATI — CONTROL ROOM / ZUBY    v36 — DESKTOP + MOBILE CAMERA CUT + DEFERRED YOUTUBE    ========================================================= */  #ri-zuby-viewport, #ri-zuby-viewport *{   box-sizing:border-box; }  #ri-zuby-viewport{   position:relative;   width:100%;   aspect-ratio:16/9;   margin:0;   padding:0;   overflow:hidden;   background:#000;   cursor:pointer; }   /* =========================================================    WORLD / CAMERA    ========================================================= */  #ri-screen2-module{   position:absolute;   inset:0;    width:100%;   height:100%;    overflow:hidden;   background:#000; }   /* =========================================================    ROOM    ========================================================= */  #ri-room-bg-v29{   position:absolute;   inset:0;    width:100%;   height:100%;    display:block;   object-fit:fill;    z-index:0;    pointer-events:none;   user-select:none; }   /* =========================================================    SCREEN 1 — PYRAMIDS + YOUTUBE    ========================================================= */  #ri-screen1-warp{   position:absolute;    left:0;   top:0;    width:1600px;   height:900px;    transform-origin:0 0;    will-change:transform;    overflow:hidden;    background:#000;    z-index:2; }   #ri-pyramids-screen1{   position:absolute;   inset:0;    width:100%;   height:100%;    display:block;    object-fit:cover;    background:#000;    z-index:2;    opacity:1;    transition:     opacity 1.1s ease; }   #ri-pyramids-screen1.is-off{   opacity:0; }   #ri-youtube-screen1{   position:absolute;    left:-1.5%;   top:-1.5%;    width:103%;   height:103%;    display:block;    border:0;    background:#000;    z-index:1;    opacity:0;    transition:     opacity 1.1s ease;    pointer-events:none; }   #ri-youtube-screen1.is-on{   opacity:1; }   #ri-youtube-screen1 > iframe, #ri-youtube-player{   width:100%;   height:100%;    display:block;    border:0;    background:#000; }   /* =========================================================    SOUND BUTTON    ========================================================= */  #ri-sound-v29{   position:absolute;    left:50%;   top:50%;    z-index:5;    width:128px;   height:128px;    transform:     translate(-50%,-50%);    appearance:none;    border:0;    padding:0;   margin:0;    background:     rgba(0,0,0,.22);    border-radius:50%;    cursor:pointer;    opacity:0;    pointer-events:none;    transition:     opacity .35s ease,     transform .2s ease,     background .2s ease; }   #ri-sound-v29.is-visible{   opacity:1;   pointer-events:auto; }   #ri-sound-v29.is-visible.sound-hidden-v34{   opacity:0;   pointer-events:none; }   #ri-sound-v29:hover{   opacity:1;    transform:     translate(-50%,-50%)     scale(1.06);    background:     rgba(0,0,0,.38); }   #ri-sound-v29 .ri-sound-icon-v30{   display:block;    width:100%;   height:100%; }   #ri-sound-v29 svg{   width:100%;   height:100%;    display:block;    fill:none;    stroke:#fff;   stroke-width:7;    stroke-linecap:round;   stroke-linejoin:round;    filter:     drop-shadow(       0 0 5px       rgba(255,255,255,.22)     ); }   #ri-sound-v29 .ri-icon-on-v30{   display:none; }   #ri-sound-v29.sound-on-v30 .ri-icon-muted-v30{   display:none; }   #ri-sound-v29.sound-on-v30 .ri-icon-on-v30{   display:block; }   /* =========================================================    SCREEN 2 — TERMINAL + ZUBY    ========================================================= */  #ri-screen2-warp{   position:absolute;    left:0;   top:0;    width:1600px;   height:900px;    transform-origin:0 0;    will-change:transform;    overflow:hidden;    background:#000;    z-index:2; }   #ri-terminal-canvas{   position:absolute;   inset:0;    width:1600px;   height:900px;    display:block;    z-index:2;    background:#000;    opacity:1;    transition:     opacity 1.2s ease; }   #ri-terminal-canvas.is-off{   opacity:0; }   #ri-zuby-image{   position:absolute;   inset:0;    width:100%;   height:100%;    object-fit:cover;    display:block;    z-index:1;    opacity:0;    transform:     scale(1.045);    transition:     opacity 2.8s ease,     transform 8s ease-out; }   #ri-zuby-image.is-on{   opacity:1;    transform:     scale(1.015); }   /* =========================================================    MOBILE CAMERA CUT — v35    ---------------------------------------------------------    Desktop remains untouched.     Tablet / large mobile:    We move the camera closer so the two physical monitors    become the composition instead of tiny details in a room.     Small mobile:    We go closer again. The monitor pair fills almost the    entire phone width, while both screens remain visible.    ========================================================= */  @media (max-width:767px){    #ri-zuby-viewport{     /*       155vw wide 16:9 world:       155 × 9 / 16 = 87.1875vw     */      height:87.1875vw;     aspect-ratio:auto;      touch-action:manipulation;   }     #ri-screen2-module{     top:0;     right:auto;     bottom:auto;      left:-54vw;      width:155vw;     height:87.1875vw;   }     /*     The button lives inside the perspective-warped monitor.     It therefore needs a larger source size on small screens     to retain a visible physical presence after projection.   */    #ri-sound-v29{     width:168px;     height:168px;   }  }   /* =========================================================    SMALL PHONES — TRUE MOBILE COMPOSITION    ========================================================= */  @media (max-width:480px){    #ri-zuby-viewport{     /*       180vw wide 16:9 world:       180 × 9 / 16 = 101.25vw        The extra height is intentional.       On a phone this becomes a real scene rather than a       miniature desktop strip.     */      height:101.25vw;   }     #ri-screen2-module{     left:-69vw;      width:180vw;     height:101.25vw;   }     #ri-sound-v29{     width:190px;     height:190px;   }  }   /* =========================================================    VERY SMALL PHONES    ========================================================= */  @media (max-width:360px){    #ri-screen2-module{     left:-70vw;   }  }   /* =========================================================    REDUCED MOTION    ========================================================= */  @media (prefers-reduced-motion:reduce){    #ri-zuby-viewport *,   #ri-zuby-viewport *::before,   #ri-zuby-viewport *::after{     transition-duration:.01ms !important;     animation-duration:.01ms !important;   }  }   /* =========================================================    RADIO ILLUMINATI — SEAN STONE ARCHIVE    DESKTOP + MOBILE CAMERA CUT    ========================================================= */  #ri-sean-viewport, #ri-sean-viewport *{   box-sizing:border-box; }  #ri-sean-viewport{   position:relative;   width:100%;   margin:0;   padding:0;   overflow:hidden;   background:#000; }   /* =========================================================    CAMERA WINDOW    ========================================================= */  #ri-sean-camera{   position:relative;   width:100%;   aspect-ratio:16 / 9;   overflow:hidden;   background:#000; }   /* =========================================================    WORLD    ========================================================= */  #ri-sean-module{   position:absolute;   inset:0;   width:100%;   height:100%;   overflow:hidden;   background:#000; }   /* =========================================================    ROOM    ========================================================= */  #ri-sean-bg{   position:absolute;   inset:0;    width:100%;   height:100%;    display:block;    object-fit:fill;    z-index:0;    pointer-events:none;   user-select:none; }   /* =========================================================    PHYSICAL SCREEN    ========================================================= */  #ri-sean-warp{   position:absolute;    left:0;   top:0;    width:1600px;   height:900px;    transform-origin:0 0;    will-change:transform;    overflow:hidden;    background:#000;    z-index:2;    cursor:pointer; }   /* =========================================================    YOUTUBE    ========================================================= */  #ri-sean-youtube{   position:absolute;    left:-1.5%;   top:-1.5%;    width:103%;   height:103%;    display:block;    margin:0;   padding:0;    border:0;    background:#000;    z-index:1;    pointer-events:none;    backface-visibility:hidden;   -webkit-backface-visibility:hidden; }   /* =========================================================    TERMINAL CANVAS    ========================================================= */  #ri-sean-canvas{   position:absolute;   inset:0;    width:1600px;   height:900px;    display:block;    z-index:2;    background:#000;    opacity:1;    transition:     opacity 1.2s ease;    pointer-events:none; }   #ri-sean-canvas.is-off{   opacity:0; }   /* =========================================================    SOUND    ========================================================= */  #ri-sean-sound{   position:absolute;    left:50%;   top:50%;    z-index:4;    width:74px;   height:74px;    transform:     translate(-50%,-50%);    appearance:none;    border:0;    padding:0;   margin:0;    background:     rgba(0,0,0,.24);    border-radius:50%;    cursor:pointer;    opacity:0;   pointer-events:none;    transition:     opacity .35s ease,     transform .2s ease,     background .2s ease; }   #ri-sean-sound.is-visible{   opacity:1;   pointer-events:auto; }   #ri-sean-sound.is-hidden{   opacity:0;   pointer-events:none; }   #ri-sean-sound:hover{   transform:     translate(-50%,-50%)     scale(1.06);    background:     rgba(0,0,0,.42); }   #ri-sean-sound svg{   width:100%;   height:100%;    display:block;    fill:none;    stroke:#fff;   stroke-width:7;    stroke-linecap:round;   stroke-linejoin:round;    filter:     drop-shadow(       0 0 5px       rgba(255,255,255,.25)     ); }   /* =========================================================    MOBILE CAMERA CUT     Same room.    Same physical screen.    Camera simply moves much closer.    ========================================================= */  @media(max-width:700px){    #ri-sean-camera{     /*       155vw × 16:9 world       gives a taller visible shot.     */      height:87.1875vw;      aspect-ratio:auto;   }     #ri-sean-module{     /*       Enlarged room.        The Sean monitor is on the       right-hand half of the source,       so camera moves strongly right.     */      width:155vw;     height:87.1875vw;      left:-78vw;     top:0;   }     #ri-sean-sound{     width:82px;     height:82px;   }  }   /* =========================================================    NARROW PHONES    ========================================================= */  @media(max-width:430px){    #ri-sean-module{     /*       Tiny tuning for narrow screens.       More focus on screen while still       retaining some room around it.     */      left:-80vw;   }  }   /* =========================================================    REDUCED MOTION    ========================================================= */  @media(prefers-reduced-motion:reduce){    #ri-sean-viewport *,   #ri-sean-viewport *::before,   #ri-sean-viewport *::after{     animation-duration:.01ms !important;     transition-duration:.01ms !important;   }  }   /* =========================================================    RADIO ILLUMINATI × VIVA MÁS    RESPONSIVE DIRECTOR'S CUT    ========================================================= */  #ri-vivamas, #ri-vivamas *{   box-sizing:border-box; }   /* =========================================================    STAGE    ========================================================= */  #ri-vivamas{   position:relative;    width:100%;   max-width:none;    aspect-ratio:16 / 9;    margin:0;   padding:0;    overflow:hidden;   overflow:clip;    background:#000;    cursor:pointer;    isolation:isolate; }   /* =========================================================    VIDEO CLIP    ========================================================= */  #ri-vivamas-video{   position:absolute;   inset:0;    overflow:hidden;    background:#000;    z-index:1;    /*     Extra safety for mobile compositing.   */   contain:paint; }   /* =========================================================    YOUTUBE     Desktop:    Player keeps its true 16:9 geometry.    Uniform overscan crops YouTube edges cleanly.    ========================================================= */  #ri-vivamas-youtube{   position:absolute;    left:50%;   top:50%;    width:120%;   height:120%;    margin:0;   padding:0;    border:0;    display:block;    transform:     translate(-50%,-50%);    transform-origin:center center;    background:#000;    pointer-events:none;    backface-visibility:hidden;    -webkit-backface-visibility:hidden; }   /* =========================================================    CINEMATIC SHADE    ========================================================= */  #ri-vivamas-shade{   position:absolute;   inset:0;    z-index:2;    pointer-events:none;    background:     linear-gradient(       to bottom,       rgba(0,0,0,.05) 0%,       rgba(0,0,0,0) 43%,       rgba(0,0,0,.42) 100%     ); }   /* Very subtle edge vignette */  #ri-vivamas-vignette{   position:absolute;   inset:0;    z-index:2;    pointer-events:none;    background:     radial-gradient(       ellipse at center,       transparent 55%,       rgba(0,0,0,.22) 100%     ); }   /* =========================================================    FINAL CREDIT    ========================================================= */  #ri-vivamas-credit{   position:absolute;    left:50%;   bottom:8%;    z-index:4;    width:min(92%,1400px);    transform:     translateX(-50%);    text-align:center;    color:#fff;    font-family:     Arial,     Helvetica,     sans-serif;    text-shadow:     0 2px 18px     rgba(0,0,0,.92);    pointer-events:none; }   /* =========================================================    TITLE    ========================================================= */  #ri-vivamas-title{   margin:0;    color:#fff;    font-size:     clamp(       25px,       3.5vw,       60px     );    font-weight:500;    line-height:1.08;    letter-spacing:.12em;    text-transform:uppercase; }   /* =========================================================    SUBTITLE    ========================================================= */  #ri-vivamas-subtitle{   margin-top:16px;    color:#fff;    font-size:     clamp(       10px,       1.15vw,       18px     );    font-weight:400;    line-height:1.4;    letter-spacing:.18em;    text-transform:uppercase;    opacity:.92; }   /* =========================================================    SOUND BUTTON    ========================================================= */  #ri-vivamas-sound{   position:absolute;    left:50%;   top:50%;    z-index:6;    width:110px;   height:110px;    transform:     translate(-50%,-50%);    appearance:none;    border:0;    padding:0;   margin:0;    border-radius:50%;    background:     rgba(0,0,0,.28);    cursor:pointer;    opacity:1;    transition:     opacity .35s ease,     transform .2s ease,     background .2s ease; }   #ri-vivamas-sound:hover{   transform:     translate(-50%,-50%)     scale(1.06);    background:     rgba(0,0,0,.45); }   #ri-vivamas-sound svg{   width:100%;   height:100%;    display:block;    fill:none;    stroke:#fff;   stroke-width:7;    stroke-linecap:round;   stroke-linejoin:round;    filter:     drop-shadow(       0 0 5px       rgba(255,255,255,.22)     ); }   /* Sound ON = icon disappears */  #ri-vivamas-sound.is-playing{   opacity:0;    pointer-events:none; }   /* =========================================================    MOBILE — NEW CAMERA CUT     The stage becomes 4:3.     Because the source video remains 16:9,    the iframe becomes 160% wide × 120% high.     Result:    same video,    closer crop,    no stretching.    ========================================================= */  @media(max-width:700px){    #ri-vivamas{     aspect-ratio:4 / 3;   }     #ri-vivamas-youtube{     /*       4:3 stage + 16:9 source.        120% height:       0.75 × 1.20 = .90 viewport-width.        .90 × 16/9 = 1.60 viewport-width.     */      width:160%;     height:120%;   }     #ri-vivamas-sound{     width:76px;     height:76px;   }     #ri-vivamas-credit{     width:90%;      bottom:7%;   }     #ri-vivamas-title{     font-size:       clamp(         18px,         5.7vw,         31px       );      line-height:1.10;      letter-spacing:.07em;   }     #ri-vivamas-subtitle{     max-width:92%;      margin:       9px auto 0;      font-size:       clamp(         9px,         2.35vw,         13px       );      line-height:1.45;      letter-spacing:.10em;   }  }   /* =========================================================    SMALL MOBILE    ========================================================= */  @media(max-width:420px){    #ri-vivamas-credit{     bottom:6%;   }     #ri-vivamas-title{     font-size:       clamp(         17px,         5.4vw,         24px       );   }     #ri-vivamas-subtitle{     font-size:       clamp(         8px,         2.2vw,         11px       );   }  }   /* =========================================================    REDUCED MOTION    ========================================================= */  @media(prefers-reduced-motion:reduce){    #ri-vivamas *,   #ri-vivamas *::before,   #ri-vivamas *::after{     transition-duration:.01ms !important;     animation-duration:.01ms !important;   }  }