/*
Theme Name: PHXDW ORBIT splash
Theme URI: https://factor1studios.com
Author: factor1
Author URI: https://factor1studios.com
Description: Temporary single-page splash for ORBIT — Phoenix Design Week 2026. Hard-coded landing page served entirely from index.php. Not a general-purpose theme.
Version: 1.1.0
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phxdw-orbit-splash
*/

/* ============================================================
   ORBIT — Phoenix Design Week 2026 / Splash page
   factor1 studios
   ============================================================ */

:root{
  --black:   #000000;
  --white:   #FFFFFF;
  --yellow:  #FFCC00;
  --red:     #EC2522;
  --orange:  #F1683B;
  --slate:   #7894A8;   /* nav wordmark */

  /* Manifold CF is the brand font (Adobe Fonts). Archivo is the live fallback. */
  --font-display: "manifold-cf", "Manifold CF", "Archivo", system-ui, sans-serif;
  --font-body:    "manifold-cf", "Manifold CF", "Archivo", system-ui, sans-serif;
  --font-fine:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --maxw: 1200px;
  --nav-h: 72px;
  --banner-h: 53px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--black);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.06em;
  font-size:.95rem;
  padding:.85em 1.9em;
  border-radius:999px;
  line-height:1;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--red{ background:var(--red); color:var(--white); }
.btn--red:hover{ background:#d11f1c; }
.btn--white{ background:var(--white); color:var(--red); }
.btn--white:hover{ background:#f2f2f2; }

/* ============================================================
   NAV
   ============================================================ */
/* Sticky header wraps the ticker + nav so both stay pinned. */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
}

/* ---------- Scrolling ticker / announcement banner ---------- */
.ticker{
  height:var(--banner-h);
  background:#7894a8;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.ticker__track{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  white-space:nowrap;
  will-change:transform;
  animation:ticker-scroll 45s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__group{ display:flex; align-items:center; flex:0 0 auto; }
.ticker__item{
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:.02em;
  line-height:1;
}
.ticker__sep{
  color:#fff;
  font-weight:700;
  font-size:18px;
  line-height:1;
  padding:0 1.25em;
}
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.nav{
  background:var(--white);
  height:var(--nav-h);
  display:flex;
  align-items:center;
}
.nav__inner{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav__brand{
  display:flex;
  align-items:center;
  gap:.5em;
}
.nav__star{ display:inline-flex; }
.nav__wordmark{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--slate);
  font-size:1.35rem;
}
.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.5vw,34px);
}
.nav__link{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:.05em;
  font-size:.9rem;
  color:#9aa3ad;
  transition:color .15s ease;
}
.nav__link:hover{ color:var(--slate); }

/* hamburger */
.nav__toggle{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:30px;
  height:21px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.nav__toggle span{
  display:block;
  height:3px;
  width:100%;
  background:var(--red);
  border-radius:2px;
}

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--white);
  display:flex;
  flex-direction:column;
  padding:0 24px 40px;
  transform:translateY(-100%);
  opacity:0;
  visibility:hidden;
  transition:transform .3s ease, opacity .3s ease, visibility .3s;
}
.mobile-menu.is-open{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
}
.mobile-menu__top{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.mobile-menu__close{
  border:0;
  background:none;
  cursor:pointer;
  padding:6px;
  display:inline-flex;
}
.mobile-menu__links{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:34px;
}
.mobile-menu__links a:not(.btn){
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:.05em;
  font-size:1.4rem;
  color:var(--slate);
}
.mobile-menu__links .btn{ font-size:1.05rem; padding:1em 2.4em; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:var(--black);
  text-align:center;
  /* Fill the viewport minus the sticky header (ticker + nav), the two 30px
     stripes (60px), and a 30px sliver of the yellow section — so all peek before scroll. */
  --hero-reveal: calc(var(--banner-h) + var(--nav-h) + 60px + 30px);
  min-height: calc(100vh - var(--hero-reveal));
  min-height: calc(100dvh - var(--hero-reveal));
  padding:clamp(10px,1.4vw,16px) clamp(20px,5vw,40px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.hero__lockup{
  width:min(760px, 88%);
  height:auto;
  margin:0 auto;
}
.hero__cta{
  margin-top:clamp(28px,4vw,44px);
  font-size:1.05rem;
  padding:1em 2.6em;
}
.hero__launch{
  margin:clamp(26px,3.5vw,40px) 0 0;
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.06em;
  font-size:clamp(1.05rem,2.6vw,1.4rem);
  color:var(--white);
}
.hero__launch span{ color:var(--yellow); }

/* ---------- stripe transition ---------- */
.stripes{ display:block; }
.stripes span{ display:block; height:30px; }
.stripes__red{ background:var(--red); }
.stripes__orange{ background:var(--orange); }

/* ============================================================
   CONTENT SECTIONS
   ============================================================ */
.section{ padding:clamp(56px,8vw,96px) clamp(24px,5vw,40px); }
.section__inner{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.section__heading{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.08em;
  font-size:25px;
  margin:0 0 clamp(20px,3vw,30px);
  text-transform:uppercase;
}
.section__body{
  font-family:var(--font-display);
  font-weight:500;
  font-size:25px;
  line-height:1.7;
  margin:0;
}
.section__dates{
  font-family:var(--font-display);
  font-weight:700;
  font-size:25px;
  line-height:1.5;
  letter-spacing:.02em;
  text-align:center;
  margin:clamp(26px,3.5vw,36px) 0 0;
}
.section--yellow{ background:var(--yellow); color:var(--black); }
.section--yellow .section__heading{ color:var(--black); }

.section--red{ background:var(--red); color:var(--white); }
.section--red .section__heading{ color:var(--white); }
.section__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin-top:clamp(30px,4vw,44px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--black);
  text-align:center;
  padding:clamp(48px,7vw,80px) 24px clamp(36px,5vw,56px);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.footer__logo{
  width:130px;
  height:auto;
  margin-bottom:clamp(22px,3vw,30px);
}
.footer__social{
  list-style:none;
  display:flex;
  gap:clamp(12px,2vw,16px);
  padding:0;
  margin:0 0 clamp(26px,3.5vw,36px);
}
.footer__social img{
  width:46px;
  height:46px;
  border-radius:50%;
  transition:transform .15s ease;
}
.footer__social a:hover img{ transform:translateY(-3px); }

.footer__newsletter{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.08em;
  font-size:1rem;
  color:var(--yellow);
  margin-bottom:clamp(22px,3vw,30px);
}
.footer__newsletter:hover{ text-decoration:underline; }

.footer__copy{
  font-family:var(--font-fine);
  font-size:.72rem;
  color:#9a9a9a;
  margin:0 0 .6em;
  max-width:520px;
  line-height:1.5;
}
.footer__conduct{
  font-family:var(--font-fine);
  font-size:.72rem;
  color:#9a9a9a;
  letter-spacing:.03em;
}
.footer__conduct:hover{ color:#fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width:900px){
  .hero__lockup{ width:min(620px,92%); }
}

/* Mobile — switch to hamburger */
@media (max-width:680px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__wordmark{ font-size:1.2rem; }
  .hero__lockup{ width:92%; }
  .footer__social img{ width:42px; height:42px; }
  .section__dates{ font-size:20px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn,.footer__social img{ transition:none; }
  .ticker__track{ animation:none; }
}