/*
Theme Name: Capture The Flag
Theme URI: https://capturetheflag.tv
Author: Capture The Flag
Description: Custom theme for Capture The Flag — video production & post.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: ctf-theme
*/

:root{
  --bg:#0A0A0C;
  --ink:#ECEDF0;
  --ink-2:#8A8F9C;
  --ink-3:#4C515D;
  --line:#20222A;
  --grn:#3DE0FF;
  --grn-2:#BFF3FF;
  --grn-glow:rgba(61,224,255,.22);
  --grn-dim:rgba(61,224,255,.16);
  --display:'Space Grotesk',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;background:var(--bg);color:var(--ink);
  font-family:var(--display);font-weight:400;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--grn);color:#0A0A0C}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--grn);outline-offset:4px}

.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stage{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:5vh var(--pad) var(--pad);
  gap:clamp(22px,4vh,40px);
  transform:translateY(calc((100svh - var(--pad)) * -0.025));
}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-2);
}

.brand{
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.5vh,22px);
}
@property --gust{ syntax:'<number>'; inherits:true; initial-value:1; }
@property --wave-speed{ syntax:'<time>'; inherits:true; initial-value:2.8s; }
@property --gust-speed{ syntax:'<time>'; inherits:true; initial-value:18s; }
@property --angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.flag-icon{
  width:clamp(40px,9vw,56px);height:auto;display:block;overflow:visible;
  shape-rendering:crispEdges;filter:drop-shadow(0 0 14px var(--grn-glow));
  --gust:1;--wave-speed:2.8s;--gust-speed:18s;
  animation:gust var(--gust-speed) ease-in-out infinite;
}
@keyframes gust{
  0%   {--gust:0.88}
  40%  {--gust:0.82}
  56%  {--gust:1.12}
  72%  {--gust:0.96}
  100% {--gust:0.88}
}
.flag-icon .pole{fill:var(--ink-2)}
.flag-icon .pole-hi{fill:var(--ink)}
.flag-icon .px{fill:var(--grn)}
.flag-icon .px-hi{fill:var(--grn-2)}
.flag-icon .col{
  transform-box:fill-box;
  transform:translateY(calc(sin(var(--angle)) * var(--a) * var(--gust,1) * 1.4px));
  animation:wave var(--wave-speed) linear infinite, shine var(--wave-speed) linear infinite;
  animation-delay:var(--d),var(--d);
  will-change:transform,filter;
}
@keyframes wave{to{--angle:360deg}}
@keyframes shine{
  0%,100%{filter:brightness(1.1) saturate(1.05)}
  50%{filter:brightness(.9) saturate(.97)}
}

.wordmark{
  font-family:var(--display);font-weight:600;
  font-size:clamp(30px,6vw,68px);line-height:.95;letter-spacing:-.03em;color:var(--ink);
}
.wordmark .g{color:var(--grn)}

.email{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink-2);
  border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .2s,border-color .2s;
}
.email:hover{color:var(--grn);border-color:var(--grn)}

.cities{
  display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,32px);
  margin-top:clamp(4px,1vh,12px);font-family:var(--mono);pointer-events:none;
}
.city{
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.city-time{
  font-size:11px;letter-spacing:.12em;color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.city-name{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.city-sep{
  font-size:11px;color:var(--ink-3);
}
.footnote{
  position:fixed;bottom:calc(var(--pad) + 2px);left:0;right:0;z-index:21;
  display:flex;justify-content:center;
  font-family:var(--mono);pointer-events:none;
}
.copyright{
  font-size:10px;letter-spacing:.14em;color:var(--ink-3);
}
@media(max-width:600px){
  .cities,.city-sep{display:none}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}