/* Site polish v39: post-release layout, timeline, pointer effects and footer. */

/* The existing round release title remains the frame. Add the CTA as its
   final line, growing its vertical area only enough to hold the small copy. */
body.finale-released #hero .finale-release h2{
  gap:clamp(5px,.7svh,9px)!important;
  padding:clamp(17px,2.35svh,26px) clamp(10px,3vw,40px)!important;
}
body.finale-released #hero .finale-release h2 .finale-release-date{
  display:block!important;
  position:relative!important;
  z-index:2!important;
  align-self:center;
  width:auto!important;
  max-width:100%!important;
  margin:clamp(3px,.55svh,6px) auto 0!important;
  padding:0 3px!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font:900 clamp(11px,1.13vw,17px)/1.3 Arial,Helvetica,sans-serif!important;
  letter-spacing:.095em!important;
  text-wrap:balance;
  text-align:center!important;
  text-shadow:0 0 13px rgba(255,255,255,.3),0 4px 16px rgba(0,0,0,.75)!important;
  opacity:1!important;filter:none!important;animation:none!important;
}

/* Secondary elapsed clock: retain the cards and colors but tone down all
   emissive layers. These overrides beat the old high-intensity V30 rules. */
body.finale-released #hero .release-elapsed-clock .time-unit{
  border-color:rgba(255,180,225,.24)!important;
  background:linear-gradient(145deg,rgba(14,11,22,.84),rgba(22,13,29,.75))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 17px rgba(0,0,0,.25),
    0 0 13px rgba(242,63,178,.09),
    0 0 25px rgba(119,96,255,.055)!important;
}
body.finale-released #hero .release-elapsed-clock .time-value{
  text-shadow:0 0 2px rgba(255,255,255,.60),
    0 0 11px rgba(255,255,255,.11),
    0 0 21px rgba(242,63,178,.17),
    0 5px 12px rgba(0,0,0,.62)!important;
}
body.finale-released #hero .release-elapsed-clock .digit-glow{
  opacity:.16!important;
  background:radial-gradient(ellipse,rgba(242,63,178,.09),rgba(119,96,255,.03) 48%,transparent 74%)!important;
}

/* Release fireworks and audio spectrum are scoped to the countdown hero.
   Position absolute, not fixed; nothing should follow the scrollwheel into
   other sections. JS also retains these nodes inside #hero. */
body.finale-released #hero canvas#finaleFireworks{
  position:absolute!important;
  inset:0!important;
  left:0!important;top:0!important;right:0!important;bottom:0!important;
  width:100%!important;height:100%!important;
  z-index:17!important;
  pointer-events:none!important;
}
body.tfw-visualizer-ready.finale-released #hero .finale-visualizer-wrap{
  position:absolute!important;
  left:50%!important;
  top:auto!important;
  bottom:clamp(23px,4svh,52px)!important;
  translate:-50% 0!important;
  transform:none!important;
  margin:0!important;
  width:min(720px,58vw)!important;
  height:44px!important;
  z-index:16!important;
}
@media(max-width:900px){
 body.tfw-visualizer-ready.finale-released #hero .finale-visualizer-wrap{
   width:min(78vw,540px)!important;height:36px!important;
 }
}
@media(max-width:700px){
 body.tfw-visualizer-ready.finale-released #hero .finale-visualizer-wrap{
   width:86vw!important;height:36px!important;bottom:clamp(17px,3svh,30px)!important;
 }
 body.finale-released #hero .finale-release h2 .finale-release-date{
   font-size:clamp(10px,2.55vw,13px)!important;
   letter-spacing:.06em!important;
 }
}

/* Restore comfortable left/right timeline breathing room at full widths.
   The JS dynamic --timeline-edge padding centers first and last cards. */
.timeline-viewport{scroll-padding-inline:12px}
.timeline-viewport .timeline{
  box-sizing:border-box;
  padding-left:var(--timeline-edge,24px)!important;
  padding-right:var(--timeline-edge,24px)!important;
}
.timeline-viewport .timeline-item{scroll-snap-align:center!important}
.timeline-viewport .timeline-visual,.timeline-viewport .timeline-copy{
  min-width:0;
}

/* Visually center the GTA VI mark relative to DON'T WAIT ALONE. */
.share-inner .share-logo{position:relative;left:-10px}

/* Same cinematic pointer light in articles and throughout the homepage. */
html:not(.tfw-no-pointer) .cursor-glow{
  width:450px;height:450px;
  background:radial-gradient(circle,rgba(242,63,178,.105),rgba(255,156,67,.05) 20%,rgba(119,96,255,.06) 40%,transparent 73%);
  mix-blend-mode:screen;
}
.tfw-pointer-dot{
  position:fixed;z-index:980;
  width:12px;height:12px;
  top:0;left:0;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 35% 30%,#fff 0 15%,#ff91ce 42%,#8f75ff 85%);
  box-shadow:0 0 0 1px rgba(255,255,255,.76),0 0 13px rgba(242,63,178,.6),0 0 21px rgba(119,96,255,.35);
  transition:width .23s ease,height .23s ease,opacity .2s ease,box-shadow .23s ease;
}
body.tfw-custom-cursor .tfw-pointer-dot{opacity:1}
body.tfw-custom-cursor .tfw-pointer-dot.interactive{
  width:20px;height:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.84),0 0 0 6px rgba(242,63,178,.10),0 0 25px rgba(242,63,178,.6);
}
@media(pointer:fine){
 body.tfw-custom-cursor,body.tfw-custom-cursor a,
 body.tfw-custom-cursor button,body.tfw-custom-cursor summary,
 body.tfw-custom-cursor [role="button"]{cursor:none!important}
 body.tfw-custom-cursor input,body.tfw-custom-cursor textarea,
 body.tfw-custom-cursor select,body.tfw-custom-cursor [contenteditable="true"]{cursor:text!important}
}
@media(pointer:coarse),(prefers-reduced-motion:reduce){
 .tfw-pointer-dot{display:none!important}
}


/* v40 — full-page pointer lighting, featured-only intel and progressive sections. */
@media(pointer:fine) and (prefers-reduced-motion:no-preference){
  html body.tfw-custom-cursor .cursor-glow,
  html.tfw-perf-lite:not(.tfw-perf-mobile) body.tfw-custom-cursor .cursor-glow{
    opacity:.95!important;
    background:radial-gradient(circle,rgba(242,63,178,.17),rgba(255,166,81,.075) 21%,rgba(124,96,255,.075) 41%,transparent 73%)!important;
    filter:saturate(1.2);
    z-index:490;
  }
  body.tfw-custom-cursor .tfw-pointer-dot{
    position:fixed!important;
    transform:translate(-50%,-50%)!important;
    width:13px;height:13px;
    z-index:9000!important;
    opacity:0;
  }
  body.tfw-custom-cursor.tfw-pointer-active .tfw-pointer-dot{opacity:1}
}
@media(pointer:coarse),(prefers-reduced-motion:reduce){
  .tfw-pointer-dot{display:none!important}
}

/* Section 03: just two readable cover stories on the homepage. */
#intel .intel-archive-shortcuts{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;
}
#intel .intel-archive-shortcuts a{
  display:inline-flex;justify-content:center;align-items:center;
  padding:11px 17px;min-height:40px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:rgba(255,255,255,.75);
  font:900 9px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.14em;
  transition:background .25s,border-color .25s,color .25s;
}
#intel .intel-archive-shortcuts a:hover,#intel .intel-archive-shortcuts a:focus-visible{
  border-color:rgba(242,63,178,.55);
  background:rgba(242,63,178,.12);color:#fff;
}
#intel .intel-grid{padding-bottom:12px!important}
#intel .intel-grid .intel-card,#intel .intel-grid .intel-card:nth-child(3n){
  grid-column:span 6;min-height:520px;
}
#intel .intel-archive-cta{
  width:min(1150px,90vw);margin:20px auto 0;
  padding:25px 24px 68px;
  text-align:center;border-top:1px solid rgba(255,255,255,.13);
}
#intel .intel-archive-cta>span{
  font:900 9px/1 Arial;letter-spacing:.22em;color:#f495cb;
}
#intel .intel-archive-cta p{
  max-width:640px;margin:16px auto 25px;
  color:rgba(255,255,255,.62);font-size:14px;line-height:1.65;
}
#intel .intel-archive-cta .fx-button{display:inline-flex;align-items:center;justify-content:center;min-height:45px}

/* Avoid scrolling jumps while sections are still awaiting lazy hydration. */
#timeline:not(.tfw-section-hydrated) #timelineViewport{min-height:610px}
#intel:not(.tfw-section-hydrated) #intelGrid{min-height:540px}
#today:not(.tfw-section-hydrated) .newspaper-image{background-image:none}
#timeline:not(.tfw-section-hydrated) .timeline-backdrop,
#intel:not(.tfw-section-hydrated) .intel-backdrop{background-image:none!important}

/* Ryze insignia inside the Share dialog: modest and unobtrusive. */
#shareModal .tfw-share-brand{
  display:block!important;
  width:clamp(86px,11vw,112px);
  height:auto;
  max-height:55px;
  object-fit:contain;
  object-position:left center;
  margin:-8px 0 22px;
  opacity:.84;
  filter:drop-shadow(0 3px 12px rgba(242,63,178,.15));
}
@media(max-width:780px){
  #intel .intel-grid .intel-card,#intel .intel-grid .intel-card:nth-child(3n){
    grid-column:span 12;min-height:500px;
  }
  #intel .intel-archive-cta{padding:20px 0 58px}
}
@media(max-width:550px){
  #intel .intel-grid .intel-card,#intel .intel-grid .intel-card:nth-child(3n){min-height:440px}
  #intel .intel-archive-shortcuts a{font-size:8px;padding:10px 13px;min-height:36px}
  #shareModal .tfw-share-brand{width:90px;margin:0 0 15px}
}


/* V43 — standard-size Windows-style arrow and discreet page-wide GTA VI accent + familiar arrow cursor.
   One small diffuse halo, not a floodlight; SVG tip follows the click hotspot.
   The layer is separate from legacy .cursor-glow so performance optimisations
   and nested stacking contexts cannot hide it. */
#tfwGlobalCursor.tfw-global-cursor-layer{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:block!important;
  width:100vw!important;
  height:100vh!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:transparent!important;
  transition:opacity .18s ease,visibility 0s linear .18s;
}
#tfwGlobalCursor.tfw-global-cursor-layer.active{
  opacity:1!important;
  visibility:visible!important;
  transition:opacity .18s ease,visibility 0s linear 0s;
}
/* Far smaller and about 85% less luminous than V41. */
#tfwGlobalCursor .tfw-global-cursor-glow{
  position:absolute!important;
  top:0!important;
  left:0!important;
  width:210px!important;
  height:210px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  opacity:.65!important;
  background:radial-gradient(circle,
    rgba(255,195,220,.075) 0%,
    rgba(242,63,178,.065) 12%,
    rgba(255,164,93,.035) 29%,
    rgba(119,96,255,.025) 48%,
    transparent 72%)!important;
  mix-blend-mode:screen;
  filter:blur(10px);
  transform:translate3d(-200px,-200px,0) translate(-50%,-50%);
  will-change:transform;
  transition:transform .055s linear;
}
/* The cursor is a true classic arrow: no ring, circle, or neon spotlight. */
#tfwGlobalCursor .tfw-global-cursor-reticle{
  position:absolute!important;
  top:0!important;
  left:0!important;
  width:18px!important;
  height:24px!important;
  border:0!important;
  border-radius:0!important;
  box-sizing:border-box!important;
  padding:0!important;
  overflow:visible!important;
  background:none!important;
  pointer-events:none!important;
  box-shadow:none!important;
  transform:translate3d(-200px,-200px,0);
  will-change:transform;
  transition:none!important;
}
#tfwGlobalCursor .tfw-global-cursor-reticle:before,
#tfwGlobalCursor .tfw-global-cursor-reticle:after{
  content:none!important;
  display:none!important;
}
#tfwGlobalCursor .tfw-global-cursor-reticle svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.78))
    drop-shadow(0 0 3px rgba(242,63,178,.16));
  transform-origin:2px 1.5px;
  transition:transform .18s ease,filter .18s ease;
}
#tfwGlobalCursor.interactive .tfw-global-cursor-reticle{
  width:18px!important;
  height:24px!important;
  box-shadow:none!important;
}
#tfwGlobalCursor.interactive .tfw-global-cursor-reticle svg{
  transform:scale(1.03);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.80))
    drop-shadow(0 0 4px rgba(242,63,178,.28));
}
#tfwGlobalCursor.text-input .tfw-global-cursor-reticle{
  opacity:0!important;
}
/* Legacy pointer effects still exist in app.js, but only this single
   new layer should appear once a physical mouse has been detected. */
html.tfw-global-cursor-ready .cursor-glow{
  opacity:0!important;
  display:none!important;
}
@media(any-hover:hover) and (any-pointer:fine){
  html.tfw-global-cursor-ready,
  html.tfw-global-cursor-ready body,
  html.tfw-global-cursor-ready body *{
    cursor:none!important;
  }
  html.tfw-global-cursor-ready input:not([type="range"]),
  html.tfw-global-cursor-ready textarea,
  html.tfw-global-cursor-ready select,
  html.tfw-global-cursor-ready [contenteditable="true"]{
    cursor:text!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #tfwGlobalCursor,
  #tfwGlobalCursor .tfw-global-cursor-glow,
  #tfwGlobalCursor .tfw-global-cursor-reticle svg{
    transition:none!important;
  }
}
@media(max-width:700px){
  #tfwGlobalCursor .tfw-global-cursor-glow{
    width:180px!important;
    height:180px!important;
  }
}

/* V44 — featured dossiers: compact editorial hand-off to the archive. */
#intel .intel-grid{
  padding-bottom:0!important;
}
#intel .intel-archive-cta{
  margin:2px auto 0!important;
  padding:12px 20px 40px!important;
}
#intel .intel-archive-cta>span{
  display:block;
  margin:0 0 7px!important;
}
#intel .intel-archive-cta p{
  margin:6px auto 12px!important;
  line-height:1.45!important;
}
#intel .intel-archive-cta .fx-button{
  min-height:48px!important;
  padding:12px 25px!important;
  box-shadow:0 0 24px rgba(242,63,178,.19),0 8px 26px rgba(0,0,0,.22);
}
@media(max-width:700px){
  #intel .intel-archive-cta{
    margin:0 auto!important;
    padding:8px 10px 32px!important;
  }
  #intel .intel-archive-cta p{margin:5px auto 10px!important}
}

/* V46: one focused archive button, aligned tightly with featured covers. */
#intel .intel-archive-cta{
  margin:-20px auto 0!important;
  padding:0 16px 34px!important;
  border-top:0!important;
}
#intel .intel-archive-cta .fx-button{
  padding:14px 30px!important;
  min-height:48px!important;
}
@media(max-width:700px){
  #intel .intel-archive-cta{margin:-12px auto 0!important;padding:0 12px 30px!important}
}


/* V47 — the archive CTA sits in normal flow BELOW both featured stories.
   The previous negative margin pulled the button over their bottom edges. */
#intel #intelGrid{
  padding-bottom:0!important;
  margin-bottom:0!important;
}
#intel .intel-archive-cta{
  position:relative!important;
  z-index:2;
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:min(1150px,90vw)!important;
  box-sizing:border-box!important;
  clear:both;
  margin:0 auto!important;
  padding:48px 18px 68px!important;
  border:0!important;
}
#intel .intel-archive-cta .fx-button{
  position:relative;
  margin:0!important;
}
@media(max-width:700px){
  #intel .intel-archive-cta{
    width:92vw!important;
    margin:0 auto!important;
    padding:42px 10px 58px!important;
  }
}

/* V48 — clearer Ryze branding in Share dialog and unobtrusive footer end. */
#shareModal .tfw-share-brand{
  width:clamp(150px,17vw,192px)!important;
  max-height:110px!important;
  height:auto!important;
  opacity:1!important;
  margin:0 0 24px!important;
}
@media(max-width:550px){
  #shareModal .tfw-share-brand{
    width:clamp(130px,38vw,155px)!important;
    max-height:90px!important;
  }
}
/* Remove the hairline that appears directly below the final banner. */
body.home-page>footer{
  border-top:0!important;
}
body.home-page #share .share-backdrop:after{
  display:none!important;
}
/* No native scroll thumb for mouse-drag lists: the themed in-page
   draggable thumb uses the global custom pointer. */
html.tfw-global-cursor-ready .timezone-list,
html.tfw-global-cursor-ready .timeline-viewport{
  scrollbar-width:none!important;
  -ms-overflow-style:none;
}
html.tfw-global-cursor-ready .timezone-list::-webkit-scrollbar,
html.tfw-global-cursor-ready .timeline-viewport::-webkit-scrollbar{
  display:none!important;
  width:0!important;height:0!important;
}
.tfw-inpage-scrollbar{
  position:fixed;
  z-index:152;
  width:10px;
  border-radius:20px;
  background:rgba(255,255,255,.075);
  pointer-events:auto;
  touch-action:none;
}
.tfw-inpage-scrollbar[hidden]{display:none!important}
.tfw-inpage-scrollbar-thumb{
  position:absolute;top:0;left:1px;right:1px;
  border-radius:20px;
  background:linear-gradient(180deg,#ffad75,#f35bad,#9879fa);
  box-shadow:0 0 10px rgba(242,63,178,.19);
  min-height:20px;
  touch-action:none;
}