/* The RG Nets Brand — page-specific layout */
body{--accent:var(--red)}
.glow span:nth-child(1){left:-4%;top:6%;width:520px;height:520px;background:radial-gradient(circle,#ec2024,transparent 70%);opacity:.12}
.glow span:nth-child(2){right:-6%;top:52%;width:520px;height:520px;background:radial-gradient(circle,#ba122b,transparent 70%);opacity:.1}

/* ---- HUD-framed intro film (blink-in) ---- */
.film{position:relative;max-width:1060px;margin:44px auto 0;padding:0 var(--gutter)}
.film .hud{aspect-ratio:16/9;opacity:0}
.film .hud video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0e0e11}
.film .hud>*{opacity:0}
.film .hud::before{content:'';position:absolute;left:0;right:0;top:-18%;height:16%;z-index:6;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),rgba(236,32,36,.22),transparent)}
.film .hud.hud-on{animation:hudframe .9s cubic-bezier(.3,.85,.3,1) forwards}
.film .hud.hud-on>*{animation:hudcontent .5s steps(1,end) forwards;animation-delay:.78s}
.film .hud.hud-on::before{animation:hudscan .55s ease-in-out forwards;animation-delay:.95s}
.film .corner{position:absolute;width:26px;height:26px;border:2px solid rgba(236,32,36,.55);z-index:5;pointer-events:none}
.film .corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.film .corner.br{bottom:14px;right:14px;border-left:0;border-top:0}
@keyframes hudframe{0%{opacity:0;transform:scale(.1,.012);filter:brightness(4)}10%{opacity:1;transform:scale(.1,.012);filter:brightness(3.2)}
  46%{transform:scale(1,.012);filter:brightness(2.4)}56%{transform:scale(1,.012);filter:brightness(2.2)}88%{transform:scale(1,1);filter:brightness(1.25)}100%{opacity:1;transform:scale(1,1);filter:brightness(1)}}
@keyframes hudcontent{0%{opacity:0}30%{opacity:1}55%{opacity:.2}75%{opacity:1}88%{opacity:.55}100%{opacity:1}}
@keyframes hudscan{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(780%)}}
@media (prefers-reduced-motion:reduce){.film .hud,.film .hud>*{opacity:1;animation:none!important}.film .hud::before{display:none}}

/* ---- inherited marks ---- */
.marks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.marks .hud{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:26px}
.marks .hud img{width:auto;max-width:78%;max-height:72%;object-fit:contain}
.marks .hud.light{background:#f4f4f6}
.marks .hud.light .tag{color:#111;background:rgba(255,255,255,.78);border-color:rgba(0,0,0,.1)}
.marks .hud.rx img{max-width:86%;max-height:84%}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:30px}
.cols .lede{max-width:none}
@media (max-width:760px){.marks{grid-template-columns:1fr 1fr}.marks .hud:first-child{grid-column:span 2}.cols{grid-template-columns:1fr}}

/* ---- 2020 rebrand: six logo tiles, wiggle on pointer ---- */
.logorow{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:30px;padding:8px 0}
.logorow .tile{position:relative;aspect-ratio:1;border-radius:16px;display:grid;place-items:center;padding:16%;overflow:hidden;
  border:1px solid var(--rule);will-change:transform;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.logorow .tile.light{background:#fff;border-color:#e2e2e6}
.logorow .tile.dark{background:#0a0a0c}
.logorow .tile.metal-tile{background:radial-gradient(ellipse at 50% 40%,#17171b,#0a0a0c 72%)}
.logorow .tile img{width:100%;height:auto;max-height:100%;object-fit:contain}
.logorow .tile img.inv{filter:invert(1) hue-rotate(191deg) saturate(8) brightness(.9)}
.logorow .metal{display:block;width:100%;aspect-ratio:var(--ar,3/1);
  background:linear-gradient(170deg,#ffffff 0%,#c9ccd3 28%,#8d9199 50%,#e6e8ec 72%,#9aa0a8 100%);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media (max-width:860px){.logorow{grid-template-columns:repeat(3,1fr);gap:12px}}
/* Touch devices can't have the cursor ripple, so the row plays a one-shot wave when it
   reveals — same physical personality, no fight with vertical scrolling and no false
   tap affordance on marks that aren't interactive. (Direction: Antigravity.) */
@media (hover:none),(pointer:coarse){
  .logorow.on .tile{animation:tile-wave .54s cubic-bezier(.22,1,.36,1) backwards}
  .logorow.on .tile:nth-child(1){animation-delay:.08s;--tilt:-3deg}
  .logorow.on .tile:nth-child(2){animation-delay:.15s;--tilt:2.5deg}
  .logorow.on .tile:nth-child(3){animation-delay:.22s;--tilt:-2deg}
  .logorow.on .tile:nth-child(4){animation-delay:.29s;--tilt:3deg}
  .logorow.on .tile:nth-child(5){animation-delay:.36s;--tilt:-2.5deg}
  .logorow.on .tile:nth-child(6){animation-delay:.43s;--tilt:2deg}
  @keyframes tile-wave{
    0%{transform:translateY(0) rotate(0deg) scale(1)}
    38%{transform:translateY(-9px) rotate(var(--tilt,2deg)) scale(1.045)}
    72%{transform:translateY(1.5px) rotate(calc(var(--tilt,2deg) * -.2)) scale(.99)}
    100%{transform:translateY(0) rotate(0deg) scale(1)}
  }
}
@media (prefers-reduced-motion:reduce){.logorow .tile{transition:none;transform:none!important;animation:none!important}}

/* ---- where I last left it: bento incl. a 9:16 presenter tile ---- */
.left-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(190px,auto);gap:16px;margin-top:30px}
.left-grid .hud{min-height:0}
.left-grid .hud.logo{display:flex;align-items:center;justify-content:center;padding:32px;background:radial-gradient(ellipse at 50% 50%,#1a0d0f,#121215 70%)}
.left-grid .hud.logo img{width:min(52%,240px)}
.left-grid .hud video.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0e0e11}
/* every tile is placed explicitly — auto-placement was what left holes in the grid */
.l-logo{grid-column:1/5;grid-row:1/3}
.l-env{grid-column:5/10;grid-row:1/3;background:#f2f2f4}
.l-romeo{grid-column:10/13;grid-row:1/3}
.l-mavens{grid-column:1/6;grid-row:3/4;min-height:230px}
.l-docs{grid-column:6/8;grid-row:3/4;min-height:230px}
.l-end{grid-column:8/13;grid-row:3/4;min-height:230px}
.left-grid .l-motion{grid-column:1/13;grid-row:4/5;min-height:340px}
@media (max-width:860px){
  /* two columns, named areas. The presenter is the one portrait asset, so it takes a
     double-height cell — placed beside 04/05 so the numbered tiles still read 01→07
     in normal top-to-bottom, left-to-right order. */
  .left-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
    grid-template-areas:"logo logo" "env env" "romeo mavens" "romeo docs" "end end" "motion motion";
    grid-template-rows:auto auto 120px 170px auto auto}
  .left-grid>*{grid-column:auto;grid-row:auto}
  .left-grid .tag{white-space:normal;max-width:calc(100% - 20px)}
  .l-logo{grid-area:logo;min-height:250px}
  .left-grid .hud.logo img{width:min(66%,260px)}
  .l-env{grid-area:env;aspect-ratio:16/10;min-height:0}
  .l-romeo{grid-area:romeo;min-height:0}
  .l-mavens{grid-area:mavens;min-height:0}
  .l-docs{grid-area:docs;min-height:0}
  .l-end{grid-area:end;aspect-ratio:16/9;min-height:0}
  .left-grid .l-motion{grid-area:motion;aspect-ratio:16/9;min-height:0}
}