/*
Theme Name: Super Pro Games — The First Chapter
Theme URI: https://superprogames.net/
Author: Super Pro Games LLC
Description: A quiet, cryptic landing page for the studio's first game. No plugins, tracking, external fonts or release date.
Version: 1.0.1
Requires PHP: 7.4
Text Domain: super-pro-games-teaser
*/
/* Super Pro Games: a quiet threshold into the studio's first world. */
:root{color-scheme:dark;--night:#080e14;--ivory:#f5f0e2;--gold:#e7c788;--muted:#b9c1c7;font-family:"Trebuchet MS",Arial,sans-serif;background:var(--night);color:var(--ivory)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,a,summary{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit}button,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:7px}.skip-link{position:fixed;top:16px;left:16px;z-index:20;padding:14px 20px;background:var(--night);transform:translateY(-180%)}.skip-link:focus{transform:none}
.teaser{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--night)}
.landscape,.veil,.snow{position:absolute;inset:0;pointer-events:none;z-index:-1}.landscape img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;filter:saturate(.83) brightness(.76)}
.veil{background:linear-gradient(90deg,rgba(5,11,17,.96) 0%,rgba(5,11,17,.85) 23%,rgba(5,11,17,.4) 48%,rgba(5,11,17,.02) 73%),linear-gradient(0deg,#080e14 0%,rgba(8,14,20,.76) 7%,transparent 35%,rgba(6,13,20,.12) 72%,rgba(6,13,20,.68) 100%)}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:24px clamp(24px,5.5vw,96px) 0}.brand{display:block;line-height:0;flex:none}.brand img{display:block;width:126px;height:auto}.chapter{color:#e0e1dd;font-size:.75rem;letter-spacing:.21em;text-transform:uppercase}
.story{position:relative;margin:auto 0;padding:clamp(45px,9vh,112px) 0 72px clamp(24px,7.3vw,126px);width:min(100%,780px)}
.eyebrow{display:flex;align-items:center;gap:15px;color:var(--gold);font-size:.75rem;letter-spacing:.21em;text-transform:uppercase;margin:0 0 27px}.eyebrow>span{display:inline-block;width:34px;height:1px;background:var(--gold);opacity:.75}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(4.3rem,6.9vw,7.3rem);font-weight:400;line-height:.98;letter-spacing:-.055em;margin:0 0 30px;text-wrap:balance}h1 em{font-weight:400;color:#ead5a8;letter-spacing:-.06em}.invitation{font-size:1.0625rem;line-height:1.75;letter-spacing:.025em;color:#d0d5d5;margin:0 0 34px}
.clue{width:min(100%,430px)}.clue summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:36px;width:max-content;max-width:100%;min-height:52px;border:1px solid #8f8062;border-radius:2px;background:rgba(8,14,20,.44);padding:0 21px;color:#f1dfba;font-size:.875rem;letter-spacing:.035em;transition:background .2s,border-color .2s}.clue summary::-webkit-details-marker{display:none}.clue summary:hover{background:#252b2c;border-color:var(--gold)}.glint{font:300 1.45rem Georgia,serif;line-height:1;transition:transform .25s}.clue[open] .glint{transform:rotate(45deg)}.whisper{border-left:1px solid #766749;margin:25px 24px 0 0;padding-left:21px;font-size:1rem;line-height:1.65;color:#eee8d8}.whisper p{margin:0 0 14px}.whisper .development{font-size:.875rem;color:#bdc5c7;margin:0}
.colophon{display:flex;justify-content:space-between;align-items:center;gap:22px;margin:0 clamp(24px,5.5vw,96px);padding:22px 0 24px;border-top:1px solid rgba(230,220,192,.2);font-size:.75rem;color:#aeb7bd;letter-spacing:.025em}.closing{display:flex;align-items:center;gap:20px}.closing>span{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:.875rem;color:#d0c7b6}.motion-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #52616a;border-radius:50%;background:transparent;color:#c0c9cd;cursor:pointer}.motion-toggle[hidden]{display:none}.motion-toggle:hover{border-color:var(--gold);color:var(--gold)}.play-symbol{display:none}.motion-toggle[aria-pressed=true] .play-symbol{display:block}.motion-toggle[aria-pressed=true] .pause-symbol{display:none}
.platforms{margin:0 clamp(24px,5.5vw,96px);padding:8px 0 30px;text-align:center}.platforms h2{font:400 .75rem/1.5 "Trebuchet MS",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#b6bdc1;margin:0 0 20px}.platform-list{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:25px 48px;list-style:none;margin:0;padding:0}.platform-list li{display:flex;align-items:center;justify-content:center;gap:12px;min-height:36px;color:#e4e6e4;font-size:1.0625rem;line-height:1.4;white-space:nowrap}.platform-list img{display:block;flex:none;object-fit:contain;filter:invert(1);opacity:.88}.steam-name{text-transform:uppercase;letter-spacing:.07em}.steam-name sup{font-size:.55em;margin-left:2px;vertical-align:super}
@media(max-width:600px){.platforms{margin:0 28px;padding:8px 0 28px}.platform-list{display:grid;grid-template-columns:max-content max-content;gap:24px 32px;justify-content:center}.platform-list li{justify-content:flex-start;font-size:.9375rem;gap:10px}.platform-list img{width:27px;height:27px}.platforms h2{margin-bottom:24px}}
@media(max-width:360px){.platform-list{gap:23px 25px}.platform-list li{font-size:.875rem;gap:8px}.platform-list img{width:25px;height:25px}}
.snow{overflow:hidden}.snow i{position:absolute;top:-8%;left:var(--x);width:var(--size);height:var(--size);border-radius:50%;background:#e6eaf0;opacity:0;animation:drift var(--duration) var(--delay) linear infinite}.paused .snow i{animation-play-state:paused}@keyframes drift{0%{transform:translate3d(0,-12px,0);opacity:0}12%{opacity:var(--alpha)}88%{opacity:var(--alpha)}100%{transform:translate3d(-65px,108vh,0);opacity:0}}
@media(min-width:1600px){.landscape img{object-position:center}.story{padding-top:110px;padding-bottom:110px}}
@media(max-width:760px){.masthead{padding:20px 24px 0;align-items:flex-start}.brand img{width:106px}.chapter{font-size:.75rem;letter-spacing:.12em;max-width:120px;text-align:right;line-height:1.6;margin-top:10px}.landscape{top:90px;height:600px;max-height:76svh}.landscape img{object-position:67% 50%;filter:saturate(.85) brightness(.78)}.veil{background:linear-gradient(180deg,#080e14 0%,rgba(8,14,20,.35) 19%,rgba(8,14,20,.16) 34%,rgba(8,14,20,.85) 54%,#080e14 77%)}.story{margin:0;padding:clamp(245px,36svh,380px) 28px 48px;width:100%}.eyebrow{font-size:.75rem;letter-spacing:.13em;margin-bottom:22px}h1{font-size:clamp(3.25rem,12.7vw,5rem);margin-bottom:24px}.invitation{font-size:1rem;margin-bottom:27px}.colophon{flex-wrap:wrap;gap:14px;margin:0 28px;padding:20px 0}.closing{width:100%;justify-content:space-between}.whisper{max-width:390px}.snow i{animation-duration:calc(var(--duration)*1.3)}}
@media(max-width:360px){.masthead{padding-left:20px;padding-right:20px}.story{padding-left:22px;padding-right:22px}.eyebrow{letter-spacing:.075em}.colophon{margin-left:22px;margin-right:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.snow{display:none}}
@media(forced-colors:active){.landscape,.snow,.veil{display:none}.clue summary,.motion-toggle{border:1px solid ButtonText}}