/*
Theme Name: Temi Bush Photography
Theme URI: https://temibush.com
Author: Sol
Description: No-scroll, single-viewport photography portfolio. Four sections (Home, About, Gallery, Contact) with crossfade navigation, looping video hero, walk-in About choreography, orbiting 3D photo sphere gallery with morph lightbox, and FluentForms contact. Plugin-free except FluentForms.
Version: 1.0.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: temibush
*/

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --tb-bg: #12100D;
  --tb-cream: #F4EDE0;
  --tb-gold: #C9A45C;
  --tb-serif: 'Fraunces', Georgia, serif;
  --tb-sans: 'Instrument Sans', -apple-system, sans-serif;
}

html, body {
  height: 100%;
  overflow: hidden; /* the whole site lives in one viewport */
  background: var(--tb-bg);
  color: var(--tb-cream);
  font-family: var(--tb-sans);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--tb-gold); outline-offset: 3px; }
::selection { background: var(--tb-gold); color: var(--tb-bg); }

/* ---------- Frame ---------- */
.tb-site { position: fixed; inset: 0; overflow: hidden; }

.tb-mark {
  position: absolute; top: 24px; left: 5vw; z-index: 40;
  font-family: var(--tb-serif); font-size: 18px; letter-spacing: .04em;
}
.tb-mark span { color: var(--tb-gold); }

/* ---------- Sections (crossfade, never scroll) ---------- */
.tb-section {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s, transform .55s cubic-bezier(.2,.7,.2,1);
  pointer-events: none; z-index: 3;
}
.tb-section.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .tb-section { transform: none !important; transition: opacity .3s; }
}

/* ---------- Pill nav ---------- */
.tb-nav {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 10px 14px; border-radius: 999px;
  background: rgba(18,16,13,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(244,237,224,.12); z-index: 50;
}
.tb-nav button {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  font-size: 11.5px; letter-spacing: .14em;
  color: rgba(244,237,224,.55); transition: background .3s, color .3s;
}
.tb-nav button .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(244,237,224,.3); transition: background .3s;
}
.tb-nav button.is-active { background: rgba(244,237,224,.1); color: var(--tb-cream); }
.tb-nav button.is-active .dot { background: var(--tb-gold); }

/* ---------- HOME ---------- */
.tb-hero-video, .tb-hero-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.tb-hero-fallback { background: radial-gradient(ellipse at 50% 40%, #2A241D, var(--tb-bg) 75%); }
.tb-hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,16,13,.35) 0%, rgba(18,16,13,.05) 40%, rgba(18,16,13,.55) 100%);
}

.tb-hero-name {
  position: absolute; left: 5vw; bottom: 16vh; z-index: 2;
  font-family: var(--tb-serif); font-weight: 400;
  font-size: clamp(52px, 9vw, 126px); line-height: .98; letter-spacing: -.01em;
  text-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.tb-hero-sub {
  display: block; font-family: var(--tb-sans); font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .34em; color: var(--tb-gold); margin-top: 14px;
}
.tb-hero-right {
  position: absolute; right: 5vw; bottom: 18vh; z-index: 2;
  text-align: right; max-width: 400px;
}
.tb-hero-tagline {
  font-family: var(--tb-serif); font-style: italic; font-weight: 300;
  font-size: clamp(18px, 1.9vw, 25px); line-height: 1.45;
  margin-bottom: 22px; text-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.tb-btn {
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  background: var(--tb-cream); color: var(--tb-bg);
  font-size: 14px; font-weight: 500; transition: transform .3s, box-shadow .3s;
}
.tb-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.4); }

/* ---------- ABOUT ---------- */
.tb-about-video-wrap { position: absolute; inset: 0; z-index: 0; }
.tb-about-video { width: 100%; height: 100%; object-fit: cover; }
.tb-about-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(18,16,13,.15) 0%, rgba(18,16,13,.72) 62%, rgba(18,16,13,.85) 100%);
}
/* fallback stage when no video is set */
.tb-about-stage { position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 80%, #241E17, var(--tb-bg) 70%); }

.tb-about-text {
  position: absolute; top: 50%; right: 6vw; transform: translateY(calc(-50% + 26px));
  width: min(520px, 46vw); z-index: 2; opacity: 0;
  transition: opacity .8s .1s, transform .8s .1s cubic-bezier(.2,.7,.2,1);
}
.tb-about-text.is-visible { opacity: 1; transform: translateY(-50%); }

.tb-eyebrow { font-size: 12px; letter-spacing: .28em; color: var(--tb-gold); margin-bottom: 14px; }
.tb-about-text h2 {
  font-family: var(--tb-serif); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.05; margin-bottom: 18px;
}
.tb-about-copy {
  max-height: 46vh; overflow-y: auto; padding-right: 14px;
  font-size: 14.5px; line-height: 1.75; color: rgba(244,237,224,.78);
  scrollbar-width: thin; scrollbar-color: rgba(201,164,92,.5) transparent;
}
.tb-about-copy::-webkit-scrollbar { width: 4px; }
.tb-about-copy::-webkit-scrollbar-thumb { background: rgba(201,164,92,.5); border-radius: 4px; }
.tb-about-copy p { margin-bottom: 1em; }
.tb-about-copy h3 {
  font-family: var(--tb-serif); font-weight: 400; font-size: 21px;
  color: var(--tb-cream); margin: 1.3em 0 .5em;
}
.tb-about-copy ul { list-style: none; margin-bottom: 1em; }
.tb-about-copy li { padding-left: 18px; position: relative; margin-bottom: .45em; }
.tb-about-copy li::before { content: "—"; position: absolute; left: 0; color: var(--tb-gold); }

.tb-replay {
  margin-top: 18px; font-size: 11.5px; letter-spacing: .12em;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(244,237,224,.25); color: rgba(244,237,224,.7);
  transition: border-color .3s, color .3s;
}
.tb-replay:hover { border-color: var(--tb-gold); color: var(--tb-cream); }

/* ---------- GALLERY (orbiting sphere) ---------- */
.tb-gallery-inner {
  position: absolute; inset: 0; padding: 10vh 5vw 13vh;
  display: flex; flex-direction: column;
}
.tb-gallery-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.tb-gallery-head h2 { font-family: var(--tb-serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); }
.tb-gallery-hint { font-size: 11.5px; letter-spacing: .2em; color: var(--tb-gold); }

.tb-sphere {
  position: relative; flex: 1; min-height: 0;
  cursor: grab; touch-action: none;
  transition: opacity .5s, filter .5s;
}
.tb-sphere.is-dimmed { opacity: .15; filter: blur(3px); }

.tb-sphere-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 60; text-align: center; pointer-events: none;
}
.tb-sphere-center .name {
  font-family: var(--tb-serif); font-weight: 400;
  font-size: clamp(26px, 3.6vw, 48px); letter-spacing: .02em;
}
.tb-sphere-center .sub { font-size: 10.5px; letter-spacing: .32em; color: var(--tb-gold); margin-top: 6px; }

.tb-tile {
  position: absolute; top: 50%; left: 50%;
  width: clamp(60px, 8.5vw, 106px); aspect-ratio: 4 / 5;
  border-radius: 6px; overflow: hidden; padding: 0;
  background: #1E1B18; box-shadow: 0 10px 28px rgba(0,0,0,.45);
  will-change: transform, opacity; cursor: zoom-in;
}
.tb-tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ---------- Lightbox morph ---------- */
.tb-lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,9,7,0); transition: background .5s, backdrop-filter .5s;
  cursor: zoom-out; display: none;
}
.tb-lightbox.is-open { display: block; }
.tb-lightbox.is-shown { background: rgba(10,9,7,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.tb-lightbox-frame {
  position: fixed; border-radius: 6px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  transition: all .55s cubic-bezier(.3,.9,.25,1);
}
.tb-lightbox.is-shown .tb-lightbox-frame { border-radius: 10px; box-shadow: 0 40px 100px rgba(0,0,0,.7); }
.tb-lightbox-frame img { width: 100%; height: 100%; object-fit: cover; }

.tb-lightbox-ui {
  position: fixed; top: 9vh; left: 50%; transform: translateX(-50%);
  width: min(72vh, 82vw); height: min(72vh, 82vw);
  pointer-events: none; opacity: 0; transition: opacity .3s .25s;
}
.tb-lightbox.is-shown .tb-lightbox-ui { opacity: 1; }
.tb-lightbox-ui button {
  position: absolute; pointer-events: auto;
  border-radius: 50%; border: 1px solid rgba(244,237,224,.25);
  background: rgba(18,16,13,.65); color: var(--tb-cream);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.tb-lb-prev, .tb-lb-next { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 22px; }
.tb-lb-prev { left: -64px; } .tb-lb-next { right: -64px; }
.tb-lb-close { top: -18px; right: -18px; width: 40px; height: 40px; font-size: 15px; }

/* ---------- CONTACT ---------- */
.tb-contact-inner {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 10vh 6vw 14vh;
}
.tb-contact-box { width: min(480px, 92vw); text-align: center; }
.tb-contact-box h2 {
  font-family: var(--tb-serif); font-weight: 400;
  font-size: clamp(30px, 3.8vw, 48px); margin-bottom: 8px;
}
.tb-contact-box .lede { font-size: 14px; color: rgba(244,237,224,.6); margin-bottom: 26px; }
.tb-contact-form { text-align: left; max-height: 52vh; overflow-y: auto; padding-right: 6px; }

/* FluentForms skin to match the theme */
.tb-contact-form .ff-el-form-control,
.tb-contact-form .fluentform input[type=text],
.tb-contact-form .fluentform input[type=email],
.tb-contact-form .fluentform textarea {
  width: 100%; padding: 13px 16px; border-radius: 6px;
  border: 1px solid rgba(244,237,224,.2);
  background: rgba(244,237,224,.06); color: var(--tb-cream);
  font-family: var(--tb-sans); font-size: 14px;
}
.tb-contact-form .fluentform ::placeholder { color: rgba(244,237,224,.4); }
.tb-contact-form .ff-el-input--label label { color: rgba(244,237,224,.7); font-size: 12.5px; letter-spacing: .04em; }
.tb-contact-form .ff-btn-submit {
  width: 100%; padding: 15px; border-radius: 999px !important; border: none;
  background: var(--tb-cream) !important; color: var(--tb-bg) !important;
  font-weight: 500; font-size: 14px;
}
.tb-contact-fallback a { color: var(--tb-gold); }

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  .tb-hero-name { bottom: 24vh; }
  .tb-hero-right { right: 5vw; left: 5vw; bottom: 13vh; text-align: left; max-width: none; }
  .tb-about-text { right: 5vw; left: 5vw; width: auto; }
  .tb-about-shade { background: linear-gradient(180deg, rgba(18,16,13,.2), rgba(18,16,13,.85) 55%); }
  .tb-lb-prev { left: 6px; } .tb-lb-next { right: 6px; }
  .tb-lb-close { right: 0; top: -50px; }
  .tb-nav button { padding: 9px 11px; }
}