/* Gaming.cy studio layer: editorial confidence with a restrained game UI pulse. */
:root {
  --studio-cyan: #86d8d0;
  --studio-hot: #ff694b;
  --studio-grid: rgba(32, 35, 31, .075);
}

/* The masthead is a product mark, not a generic site header. */
.mast {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 78% 0%, #384238 0, var(--ink) 42%);
}
.mast::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background: repeating-linear-gradient(135deg, transparent 0 30px, rgba(220,233,122,.12) 31px 32px, transparent 33px 72px);
  mask-image: linear-gradient(90deg, transparent, #000 38%, transparent 100%);
}
.topline { position: relative; z-index: 1; }
.logo { position: relative; display: inline-flex; align-items: center; gap: .18em; }
.logo::before {
  content: "";
  display: inline-block;
  width: .38em;
  height: .65em;
  background: linear-gradient(180deg, var(--lime) 0 28%, transparent 28% 36%, var(--studio-cyan) 36% 64%, transparent 64% 72%, var(--studio-hot) 72%);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
  transform: skewX(-12deg);
}
.edition { border-left: 1px solid rgba(250,248,241,.26); padding-left: 17px; }
.motion-toggle {
  appearance: none;
  border: 1px solid rgba(250,248,241,.45);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font: 650 11px/1 Arial, sans-serif;
  letter-spacing: .04em;
  padding: 8px 11px;
  white-space: nowrap;
}
.motion-toggle:hover, .motion-toggle:focus-visible { background: var(--lime); border-color: var(--lime); color: var(--ink); }
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation-play-state: paused !important; transition-duration: 0s !important; }
body.motion-paused .studio-media-frame img { transform: none !important; filter: none !important; }
.portal-nav { background: rgba(250,248,241,.9); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 5; }
.portal-nav .navinner { position: relative; }
.portal-nav a { position: relative; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.portal-nav a::before { content: "//"; color: var(--studio-hot); margin-right: 6px; opacity: .7; }
.sectionhead { position: relative; }
.sectionhead::after { content: "↗"; color: var(--studio-hot); font: 700 24px/1 var(--display); }
.sectionhead h2 { text-transform: uppercase; }
.home-play { position: relative; overflow: hidden; background: linear-gradient(135deg, #e9ecdc, #d7e8dd); border: 1px solid #b1c2a5; }

.publication-footer { position: relative; overflow: hidden; }
.publication-footer::before { content: "GAMING.CY"; position: absolute; right: -10px; bottom: -30px; color: rgba(220,233,122,.08); font: 700 170px/.8 var(--display); letter-spacing: -.06em; pointer-events: none; }
.publication-footer .wrap { position: relative; z-index: 1; }
.publication-footer h2 { text-transform: uppercase; letter-spacing: .1em; }

/* Editorial reveal: content is always readable; motion only accents entry. */
.studio-reveal { opacity: 1; }
.studio-reveal.studio-enter {
  animation: studio-reveal-in .58s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
  animation-delay: var(--studio-delay, 0ms);
}
.motion-paused .studio-reveal,
.motion-paused .studio-reveal.studio-enter {
  opacity: 1; transform: none !important; animation: none !important;
}

.studio-front {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.studio-front::before {
  content: "";
  position: absolute;
  inset: 0 -12vw auto;
  height: 34rem;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(var(--studio-grid) 1px, transparent 1px), linear-gradient(90deg, var(--studio-grid) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
  opacity: .55;
}



.studio-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(32, 35, 31, .18);
  border-radius: 50%;
  pointer-events: none;
  animation: studio-drift 16s ease-in-out infinite;
}
.studio-orbit-a { width: 18rem; height: 18rem; top: 2rem; right: 25%; }
.studio-orbit-b { width: 7rem; height: 7rem; top: 19rem; right: 38%; border-color: var(--studio-hot); animation-delay: -6s; }

#lead, .studio-rail { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
#lead { position: relative; }

#lead h1 { text-wrap: balance; }

.studio-media-frame {
  position: relative;
  overflow: hidden;
  background: #111;
  box-shadow: 12px 12px 0 var(--ink);
}
.studio-media-frame img { transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.studio-media-frame:hover img { transform: scale(1.025); filter: saturate(1.12) contrast(1.04); }
.studio-scanline {
  position: absolute;
  inset: -20% 0 auto;
  height: 18%;
  background: linear-gradient(to bottom, transparent, rgba(134,216,208,.16), transparent);
  mix-blend-mode: screen;
  animation: studio-scan 7s linear infinite;
  pointer-events: none;
}
.studio-corner { position: absolute; width: 30px; height: 30px; border-color: var(--studio-cyan); border-style: solid; pointer-events: none; }
.studio-corner-tl { top: 14px; left: 14px; border-width: 2px 0 0 2px; }
.studio-corner-br { right: 14px; bottom: 14px; border-width: 0 2px 2px 0; }
.studio-hero-media figcaption { padding-top: 10px; }

.studio-rail { position: relative; }

.studio-rail .deadline { box-shadow: 7px 7px 0 var(--ink); }
.studio-rail .deadline::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin-top: 16px;
  border-radius: 50%;
  background: var(--studio-hot);
  box-shadow: 0 0 0 5px rgba(255,105,75,.18);
  animation: studio-ping 2.3s ease-out infinite;
}

@keyframes studio-drift { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(14px, -9px, 0) rotate(8deg); } }
@keyframes studio-scan { 0% { transform: translateY(-120%); } 100% { transform: translateY(660%); } }
@keyframes studio-ping { 0%,100% { box-shadow: 0 0 0 5px rgba(255,105,75,.18); } 50% { box-shadow: 0 0 0 11px rgba(255,105,75,0); } }
@keyframes studio-reveal-in { from { opacity: .96; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 800px) {
  .studio-orbit-a { right: -3rem; top: 4rem; width: 13rem; height: 13rem; }
  .studio-orbit-b { right: 25%; top: 24rem; }
  .studio-media-frame { box-shadow: 7px 7px 0 var(--ink); }
}
@media (max-width: 560px) {
  .motion-toggle { padding: 7px 8px; font-size: 10px; }
  .edition { padding-left: 9px; }
  .edition time { display: none; }
  .mast::after { opacity: .18; }
  .publication-footer::before { font-size: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-orbit, .studio-scanline, .studio-rail .deadline::after { animation: none; }
  #lead, .studio-rail, .studio-media-frame img, .studio-reveal { transition: none; animation: none; }
  .studio-reveal.studio-enter { animation: none; }
}