/*!
 * Gift Card Hero · Irvine Company Retail · Holiday 2026 (/gift-cards/)
 * Layout + styles. Everything is scoped under .gch so it won't leak into the theme.
 *
 * Layout model: the Figma frame is 1440 × 860 (desktop) / 640 × 1040 (portrait).
 * --u is one Figma pixel, scaled to the hero's size with container query units,
 * so every position below reads like the Figma spec: calc(<figma px> * var(--u)).
 */

/* Brand faces: picked up if installed locally. In WordPress, point the --gch-font-* variables at your web fonts. */
@font-face { font-family: 'GCH Display'; src: local('Copperplate CC Heavy'), local('CopperplateCC-Heavy'), local('Copperplate-Bold'), local('Copperplate Bold'); }
@font-face { font-family: 'GCH Sans'; font-weight: 400; src: local('Area Inktrap Regular'), local('AreaInktrap-Regular'); }
@font-face { font-family: 'GCH Sans'; font-weight: 800; src: local('Area Inktrap Extrabold'), local('Area Inktrap ExtraBold'), local('AreaInktrap-Extrabold'), local('AreaInktrap-ExtraBold'); }

.gch {
  /* Theme tokens (override these from the theme) */
  --gch-red: #98291c;
  --gch-pink: #d69992;
  --gch-cream: #f4eddc;
  --gch-ink: #000;
  --gch-font-display: 'GCH Display', 'Copperplate', 'Cinzel', serif;   /* Figma: Copperplate CC Heavy */
  --gch-font-sans: 'GCH Sans', 'Figtree', system-ui, sans-serif;        /* Figma: Area Inktrap */
  --gch-card-font-sans: 'Figtree';    /* text printed on the generated card art */
  --gch-card-font-serif: 'Cinzel';
  --gch-offset-top: 0px;              /* height of a fixed header / WP admin bar above the hero */
  --gch-min-height: 560px;

  position: relative;
  background: var(--gch-red);
}
.gch, .gch *, .gch *::before, .gch *::after { box-sizing: border-box; }
.gch :where(p, h1, h2) { margin: 0; padding: 0; }

/* Stage: one viewport tall, scrolls with the page (no pinning) */
.gch-hero {
  container: gch / size;
  position: relative;
  height: calc(100vh - var(--gch-offset-top));
  height: calc(100svh - var(--gch-offset-top));
  min-height: var(--gch-min-height);
  overflow: hidden;
  background: var(--gch-red);

  /* Desktop artboard (Figma frame 1440 × 860) */
  --u: min(calc(100cqw / 1440), calc(100cqh / 731));
  --ax: 720;          /* artboard centre x */
  --base-h: 860;
  --pad-x: 36; --pad-t: 36; --pad-b: 72;
  --pink-x: 954;
  --copy-x: 291.5; --copy-w: 934; --copy-y: 96; --copy-shift: 0.15;
  --cta-x: 488;
}

/* Portrait artboard (phones, narrow or tall containers) */
@container gch (max-width: 699px) or (max-aspect-ratio: 4/5) {
  .gch-hero > * {
    --u: min(calc(100cqw / 640), calc(100cqh / 884));
    --ax: 320;
    --base-h: 1040;
    --pad-x: 16; --pad-t: 16;
    --pink-x: 424;
    --copy-x: 60; --copy-w: 520; --copy-y: 84; --copy-shift: 0.45;
    --cta-x: 76;
  }
}

/* Backgrounds */
.gch-pink { position: absolute; top: 0; bottom: 0; right: 0; left: calc(50cqw + (var(--pink-x) - var(--ax)) * var(--u)); background: var(--gch-pink); }
.gch-panel {
  position: absolute; background: var(--gch-cream);
  left: calc(var(--pad-x) * var(--u)); right: calc(var(--pad-x) * var(--u));
  top: calc(var(--pad-t) * var(--u)); bottom: calc(var(--pad-b, 72) * var(--u));
}

/* Copy (z 1) */
.gch-copy {
  position: absolute; z-index: 1;
  left: calc(50cqw + (var(--copy-x) - var(--ax)) * var(--u));
  width: calc(var(--copy-w) * var(--u));
  top: calc(var(--copy-y) * var(--u) + (100cqh - var(--base-h) * var(--u)) * var(--copy-shift));
  display: flex; flex-direction: column; align-items: center; gap: calc(24 * var(--u));
  text-align: center; color: var(--gch-red);
}
.gch-eyebrow { font: 800 calc(12 * var(--u)) / 1 var(--gch-font-sans); letter-spacing: calc(1.2 * var(--u)); text-transform: uppercase; }
.gch-headline { font: 400 calc(50 * var(--u)) / 1 var(--gch-font-display); letter-spacing: calc(6 * var(--u)); text-transform: uppercase; white-space: nowrap; }
.gch-sub { font: 400 calc(16 * var(--u)) / 1.65 var(--gch-font-sans); color: rgba(0, 0, 0, .7); }
@container gch (max-width: 699px) or (max-aspect-ratio: 4/5) {
  .gch-headline { white-space: normal; font-size: calc(44 * var(--u)); line-height: 1.12; text-wrap: balance; }
}
.gch-copy > * { animation: gch-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.gch-copy > :nth-child(2) { animation-delay: .08s; }
.gch-copy > :nth-child(3) { animation-delay: .16s; }
@keyframes gch-rise { from { opacity: 0; transform: translateY(16px); } }

/* 3D canvas (z 2), created by the script: envelope + card. Clipped at the panel's bottom edge, so the
   envelope rises in from behind it and drops away behind it. */
.gch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; clip-path: inset(0 0 calc(72 * var(--u)) 0); }

/* CSS 3D fallback (z 2), used only when WebGPU and WebGL 2 are both unavailable. Clipped at the panel edge. */
.gch-css-stage { position: absolute; inset: 0 0 calc(72 * var(--u)) 0; z-index: 2; overflow: hidden; pointer-events: none; }
.gch-css-scene { position: absolute; inset: 0; transform-style: preserve-3d; }
.gch-css-env, .gch-css-panel { position: absolute; transform-style: preserve-3d; }
.gch-css-env { left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.gch-css-panel--flap { transform-origin: 50% 100%; }
.gch-css-paper { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.gch-css-paper--out { transform: rotateY(180deg); }
.gch-css-paper canvas { display: block; width: 100%; height: 100%; }
.gch-css-card { position: absolute; left: 0; top: 0; width: 520px; height: 328px; transform-style: preserve-3d; will-change: transform; }
.gch-css-face { position: absolute; inset: 0; border-radius: 27px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 26px 52px rgba(0, 0, 0, .28); }
.gch-css-face canvas { display: block; width: 100%; height: 100%; }
.gch-css-face--back { transform: rotateY(180deg); }
/* Figma sheen: 110px band at 22°, white 14% */
.gch-css-sheen { position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; background: linear-gradient(112deg, transparent calc(50% - 55px), rgba(255, 255, 255, .14) calc(50% - 55px), rgba(255, 255, 255, .14) calc(50% + 55px), transparent calc(50% + 55px)); }

/* CTAs (z 4), Figma node 131:713 */
.gch-ctas { position: absolute; z-index: 4; left: calc(50cqw + (var(--cta-x) - var(--ax)) * var(--u)); bottom: calc(17 * var(--u)); display: flex; gap: calc(16 * var(--u)); }
.gch-btn { display: flex; text-decoration: none; }
.gch-btn-label { height: calc(47 * var(--u)); padding: 0 calc(28 * var(--u)); display: flex; align-items: center; border: 1px solid var(--gch-ink); font: 400 calc(11 * var(--u)) / 1 var(--gch-font-display); letter-spacing: calc(1.54 * var(--u)); text-transform: uppercase; white-space: nowrap; }
.gch-btn-arrow { width: calc(47 * var(--u)); height: calc(47 * var(--u)); border: 1px solid var(--gch-ink); display: flex; align-items: center; justify-content: center; }
.gch-btn-arrow svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.gch-btn:hover .gch-btn-arrow svg, .gch-btn:focus-visible .gch-btn-arrow svg { transform: translateX(3px); }
.gch-btn:focus-visible { outline: 2px solid var(--gch-ink); outline-offset: 3px; }
.gch-btn--primary .gch-btn-label { background: var(--gch-red); color: var(--gch-cream); }
.gch-btn--primary .gch-btn-arrow { background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), var(--gch-red); color: var(--gch-cream); }
.gch-btn--secondary .gch-btn-label { background: var(--gch-cream); color: var(--gch-red); }
.gch-btn--secondary .gch-btn-arrow { background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), var(--gch-cream); color: var(--gch-red); }

/* Unit probe the script measures to read --u */
.gch-unit { position: absolute; left: 0; top: 0; width: calc(100 * var(--u)); height: 0; visibility: hidden; pointer-events: none; }

/* Debug HUD (data-debug="true") */
.gch-debug { position: absolute; right: 16px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 999px; background: rgba(22, 8, 6, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f4eddc; font: 600 11px/1 system-ui, sans-serif; user-select: none; }
.gch-debug-be { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.gch-debug-be i { width: 7px; height: 7px; border-radius: 50%; background: #e7b56a; }
.gch-debug-be.is-gpu i { background: #7fd49b; }
.gch-debug button { font: inherit; color: inherit; background: rgba(244, 237, 220, .14); border: 0; border-radius: 999px; padding: 6px 10px; cursor: pointer; }
@container gch (max-width: 760px) {
  .gch-debug { right: auto; left: 50%; bottom: auto; top: 10px; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .gch-copy > * { animation: none; }
}