/*
Theme Name: La Familia Villeta
Description: Full-screen (100vh) single-page family crest site with a three.js ember field, a GSAP intro, a looping multilingual tagline and a shuffling postcard deck. Crest, title, phrases and postcards are editable in the Customizer.
Author: Erickson Villeta
Author URI: https://ericksonvilleta.com
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: villeta
Tags: one-column, full-width-template, custom-background
*/

/* ---------- Tokens ---------- */
:root {
  --bg: #000000;
  --fg: #ffffff;
  --gules: #ff0000;   /* heraldic red  */
  --or: #ffe400;      /* heraldic gold */

  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Poppins", "Segoe UI", system-ui, sans-serif;

  /* Distance from the bottom of the screen to the bottom of the text block */
  --text-bottom: 18vh;
  --gutter: clamp(1.25rem, 6vw, 6rem);
  --crest-size: clamp(11rem, 26vw, 26rem);
  --title-size: clamp(2.75rem, 5.6vw, 5.75rem);
}

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

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Only the hero page locks scrolling; ordinary pages scroll normally */
body.villeta-hero {
  overflow: hidden;
}

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

/* ---------- Background canvas ---------- */
.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Hero (100vh) ---------- */
.hero {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100); /* --vh is set by villeta.js from window.innerHeight */
  height: 100dvh; /* modern browsers: tracks mobile toolbars natively */
  width: 100%;
  overflow: hidden;
}

/* Logged-in admin bar takes 32px (46px on small screens) off the top */
.admin-bar .hero {
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}
@media (max-width: 782px) {
  .admin-bar .hero {
    height: calc(100vh - 46px);
    height: calc(100dvh - 46px);
  }
}

.hero__top {
  position: absolute;
  top: 2vh;
  left: var(--gutter);
  perspective: 1200px; /* lets GSAP tilt the crest in 3D */
}

/* Crest wrapper: GSAP animates this element (tilt + float) */
.crest {
  position: relative;
  width: var(--crest-size);
  transform-style: preserve-3d;
  will-change: transform;
}

.crest__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  /* Soft colored halo so the cut-out does not look pasted on */
  filter: drop-shadow(0 0 18px rgba(255, 0, 0, 0.35))
          drop-shadow(0 0 40px rgba(255, 228, 0, 0.18));
  transform: translateZ(40px);
}

/* Burst of light behind the crest during the intro */
.crest__glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(255, 228, 0, 0.55) 0%,
      rgba(255, 0, 0, 0.35) 30%,
      rgba(255, 0, 0, 0) 65%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}

.hero__bottom {
  position: absolute;
  left: calc(var(--gutter) * 2.1);
  bottom: var(--text-bottom);
  perspective: 900px;
}

.hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: var(--title-size);
  line-height: 1.05;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  cursor: default;
}

.hero__title-line {
  display: block;
  white-space: nowrap;
  transform-style: preserve-3d;
}

/* Each letter becomes a span (built by villeta.js) */
.char {
  display: inline-block;
  will-change: transform, opacity;
  transform-origin: 50% 100%;
}

.char--space {
  width: 0.28em;
}

.hero__tagline {
  margin-top: 1.1em;
  font-size: clamp(1rem, 1.45vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0;
}

/* Blinking caret used by the typewriter effect */
.hero__tagline.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: blink 900ms steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

/* ---------- Postcard deck (right side) ---------- */
.deck {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  width: var(--deck-width, 42vw);
  max-width: 820px;
  aspect-ratio: 3 / 2;
  transform: translateY(-50%);
  /* Perspective only: no preserve-3d, so cards stack by z-index instead of
     real depth and a flipping card never slices through the pile. */
  perspective: 1600px;
  z-index: 2;
}

/* Invisible full-size button so the whole deck is a tap target */
.deck__hit {
  position: absolute;
  inset: -4%;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}
.deck__hit:focus {
  outline: none;
}
/* Keyboard users still get a ring, drawn on the card edge rather than the
   oversized hit area */
.deck__hit:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: -4%;
  border-radius: 6px;
}

.card {
  position: absolute;
  inset: 0;
  padding: clamp(6px, 0.9vw, 14px);
  background: #f6f2ea;
  border-radius: 4px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 0 50px rgba(255, 0, 0, 0.08);
  backface-visibility: hidden;
  will-change: transform;
  opacity: 0; /* GSAP reveals */
}

/* Inner window clips the photo inside the white frame */
.card__photo {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.15) contrast(1.03);
}

/* Slight zoom hides white borders baked into some source images */
.card--zoom-sm img { transform: scale(1.09); }
.card--zoom-lg img { transform: scale(1.13) translateY(2%); }

/* ---------- Copyright line ---------- */
.site-footer {
  position: fixed;
  right: var(--gutter);
  bottom: 2.4vh;
  z-index: 3;
  pointer-events: none;
}

.site-footer__copy {
  font-size: clamp(0.7rem, 0.85vw, 0.85rem);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .site-footer {
    right: auto;
    left: var(--gutter);
    bottom: 2vh;
  }
}

/* ---------- Plain pages (page.php) ---------- */
.page-wrap {
  max-width: 72ch;
  margin: 0 auto;
  padding: 12vh var(--gutter) 14vh; /* bottom room for the fixed copyright line */
}

.page-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
  margin-bottom: 1.2em;
}

.page-content {
  font-size: 1.1rem;
  line-height: 1.7;
}
.page-content > * + * {
  margin-top: 1.2em;
}
.page-content a {
  color: var(--or);
}
.page-content h2,
.page-content h3 {
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.15;
}

/* ---------- Reduced motion: static layout, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg { display: none; }
  .crest__glow { display: none; }
  .hero__tagline { opacity: 1; }
  .hero__tagline.is-typing::after { display: none; }
  .card { opacity: 1; }
  .card[data-index="1"] { transform: translateY(14px) rotate(-3deg) scale(0.96); }
  .card[data-index="2"] { transform: translateY(28px) rotate(3deg) scale(0.92); }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  :root {
    --text-bottom: 22vh;
    --crest-size: clamp(9rem, 44vw, 14rem);
    --title-size: clamp(2.4rem, 11vw, 3.5rem);
    --deck-width: 58vw;
  }

  /* Phone: deck sits in the gap between the crest and the title */
  .deck {
    top: 46%;
    right: var(--gutter);
  }

  .hero__top {
    top: 3vh;
    left: var(--gutter);
  }

  .hero__bottom {
    left: var(--gutter);
    right: var(--gutter);
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --text-bottom: 10vh;
    --crest-size: clamp(7rem, 22vh, 12rem);
    --title-size: clamp(1.8rem, 7vh, 3rem);
    --deck-width: 34vw;
  }
}