/*
Theme Name: Inspoforreelz
Theme URI: https://inspoforreelz.com
Author: Inspoforreelz
Author URI: https://inspoforreelz.com
Description: Editorial, video-first FSE block theme for event & wedding photography and highlight-reel films. Warm olive/cream palette with a subtle motion-picture signature. Built mobile-first with Core Web Vitals and answer-engine (GEO) readability in mind.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inspoforreelz
Tags: full-site-editing, block-patterns, portfolio, photography, wide-blocks, editor-style
*/

/* ------------------------------------------------------------------ *
 * Most styling lives in theme.json. This file carries only the
 * signature motifs (motion/film) and a few things tokens can't express.
 * ------------------------------------------------------------------ */

/* --- Main canvas only: soft, wide greige pinstripes -------------- *
 * Applied to <main> so it never touches the header, footer, or any
 * section that sets its own background. Shows as a paper texture on
 * the light content areas of inner pages.                            */
main.wp-block-group {
  background-image: repeating-linear-gradient(90deg, rgba(192, 70, 106, 0.055) 0 1px, transparent 1px 60px);
}

/* --- Eyebrow label: small, tracked-out, olive --------------------- */
.iffr-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}

/* --- Scrubber underline: signature hover for text links ----------- */
.iffr-scrub a,
a.iffr-scrub {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: 2px;
}
.iffr-scrub a:hover,
a.iffr-scrub:hover,
.iffr-scrub a:focus-visible,
a.iffr-scrub:focus-visible {
  background-size: 100% 1px;
}

/* --- Play affordance: overlaid on video cards --------------------- */
.iffr-play {
  position: relative;
  display: block;
  overflow: hidden;
}
.iffr-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(36, 34, 28, 0.42);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(252, 250, 245, 0.75);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease;
}
.iffr-play::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--wp--preset--color--white);
  transform: translateX(2px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.iffr-play:hover::after { transform: scale(1.08); background: rgba(192, 70, 106, 0.78); }

/* --- Filmstrip rhythm: perforation edge for portfolio bands ------- */
.iffr-filmstrip {
  position: relative;
  padding-block: var(--wp--preset--spacing--30);
}
.iffr-filmstrip::before,
.iffr-filmstrip::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  background-image: radial-gradient(var(--wp--preset--color--base) 40%, transparent 42%);
  background-size: 26px 14px;
  background-position: center;
  opacity: 0.5;
}
.iffr-filmstrip::before { top: 0; }
.iffr-filmstrip::after  { bottom: 0; }

/* --- Video facade: poster with click-to-load (JS-enhanced) -------- */
.iffr-video-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
}
.iffr-video-facade.iffr-portrait { aspect-ratio: 9 / 16; }
.iffr-video-facade video,
.iffr-video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* --- Script accent: Pinyon, for flourishes only (never body) ------ */
.iffr-script,
.is-style-iffr-script {
  font-family: var(--wp--preset--font-family--script);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--wp--preset--color--primary);
}

/* --- Card hover: gentle editorial lift ---------------------------- */
.iffr-card { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.iffr-card:hover { transform: translateY(-4px); }

/* --- Reduced motion: honor user preference ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .iffr-scrub a, a.iffr-scrub,
  .iffr-play::after, .iffr-play::before,
  .iffr-card { transition: none !important; }
}

/* --- Focus visibility (a11y floor) -------------------------------- */
:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 3px;
}