/*
Theme Name: Selectraven Video Pet
Theme URI: https://selectraven.com/
Author: Selectraven + Codex
Description: A safe, complete video-feel WooCommerce pet storefront with visible CSS motion, cat and dog product sections, and purchase paths.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: selectraven-video-pet
Tags: e-commerce, custom-logo, featured-images
*/
:root {
  --sv-black: #050403;
  --sv-ink: #11100e;
  --sv-cream: #fff5e8;
  --sv-muted: #c9b9aa;
  --sv-brass: #c99d55;
  --sv-red: #7f2334;
  --sv-green: #7e9277;
  --sv-line: rgba(255, 245, 232, .16);
  --sv-serif: Georgia, "Times New Roman", serif;
  --sv-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.selectraven-video {
  margin: 0;
  color: var(--sv-cream);
  background:
    radial-gradient(circle at 78% 16%, rgba(201,157,85,.18), transparent 28%),
    linear-gradient(180deg, #050403 0%, #130f0d 48%, #080706 100%);
  font-family: var(--sv-sans);
}
a { color: inherit; text-decoration: none; }
.sv-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 18px clamp(18px, 4vw, 58px);
  background: linear-gradient(180deg, rgba(5,4,3,.86), rgba(5,4,3,.22));
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.sv-logo-text {
  font-family: var(--sv-serif);
  font-size: clamp(24px, 2.2vw, 36px);
  letter-spacing: 0;
  color: var(--sv-cream);
}
.sv-nav { display: flex; gap: clamp(18px, 4vw, 58px); align-items: center; }
.sv-nav a, .sv-cart {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  color: rgba(255,245,232,.86);
}
.sv-cart {
  justify-self: end;
  min-width: 72px;
  text-align: center;
  border: 1px solid var(--sv-line);
  border-radius: 999px;
  padding: 10px 16px;
}
.sv-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding: 130px clamp(18px, 5vw, 78px) 34px;
  isolation: isolate;
}
.sv-liquid-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 74% 42%, rgba(255,245,232,.08), transparent 14%),
    radial-gradient(circle at 82% 55%, rgba(201,157,85,.2), transparent 18%),
    radial-gradient(circle at 30% 28%, rgba(127,35,52,.42), transparent 28%),
    linear-gradient(115deg, #070606 0%, #120b0c 45%, #050403 100%);
}
.sv-liquid-bg:before {
  content: "";
  position: absolute;
  inset: 14% 7% 8% 44%;
  border: 1px solid rgba(201,157,85,.2);
  transform: skew(-12deg) rotate(-7deg);
  animation: sv-frame-drift 9s ease-in-out infinite alternate;
}
.sv-cat-face {
  position: absolute;
  right: clamp(12px, 8vw, 160px);
  top: 21vh;
  width: clamp(300px, 42vw, 720px);
  aspect-ratio: 1 / .78;
  z-index: -1;
  filter: drop-shadow(0 32px 90px rgba(0,0,0,.7));
  transform: translateY(var(--sv-hero-shift, 0px));
}
.sv-cat-face:before {
  content: "";
  position: absolute;
  inset: 8% 10% 0;
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(circle at 45% 58%, rgba(255,245,232,.25), transparent 8%),
    radial-gradient(circle at 55% 58%, rgba(255,245,232,.22), transparent 8%),
    linear-gradient(145deg, #ddc5a8, #8c6d54 46%, #31211b 100%);
}
.sv-ear {
  position: absolute;
  top: 0;
  width: 28%;
  height: 44%;
  background: linear-gradient(135deg, #d5b695, #5b372f);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.sv-ear-left { left: 13%; transform: rotate(-22deg); }
.sv-ear-right { right: 13%; transform: rotate(22deg); }
.sv-eye {
  position: absolute;
  top: 40%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 50%, #070707 0 26%, #b7d78a 28% 62%, #13200d 66%);
  box-shadow: 0 0 32px rgba(183,215,138,.38);
  animation: sv-blink 5.8s infinite;
}
.sv-eye-left { left: 32%; }
.sv-eye-right { right: 32%; }
.sv-nose {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 7%;
  aspect-ratio: 1.2 / .8;
  background: #7f2334;
  border-radius: 50%;
  transform: translateX(-50%);
}
.sv-tongue {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 7%;
  height: 18%;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(#ff9aa7, #bb4258);
  transform-origin: top;
  animation: sv-lick 2.8s ease-in-out infinite;
}
.sv-whisker {
  position: absolute;
  top: 62%;
  width: 32%;
  height: 1px;
  background: rgba(255,245,232,.5);
}
.sv-whisker-left { left: 13%; transform: rotate(-8deg); box-shadow: 0 16px 0 rgba(255,245,232,.38), 0 -16px 0 rgba(255,245,232,.38); }
.sv-whisker-right { right: 13%; transform: rotate(8deg); box-shadow: 0 16px 0 rgba(255,245,232,.38), 0 -16px 0 rgba(255,245,232,.38); }
.sv-floating-products {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.sv-float {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 90px;
  min-height: 90px;
  border: 1px solid rgba(255,245,232,.16);
  border-radius: 999px;
  background: radial-gradient(circle at 40% 30%, rgba(255,245,232,.25), rgba(201,157,85,.15) 42%, rgba(5,4,3,.7));
  color: rgba(255,245,232,.86);
  font-weight: 900;
  box-shadow: 0 22px 70px rgba(0,0,0,.38);
  animation: sv-float 5.5s ease-in-out infinite alternate;
}
.sv-float-bowl { right: 35%; top: 26%; }
.sv-float-wand { right: 12%; top: 58%; animation-delay: -1s; }
.sv-float-bed { right: 43%; bottom: 16%; animation-delay: -2s; }
.sv-float-leash { right: 7%; top: 34%; animation-delay: -3s; }
.sv-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding-bottom: 76px;
}
.sv-hero-copy span, .sv-section-head span, .sv-cinema-copy span, .sv-checkout-band span {
  color: var(--sv-brass);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.sv-hero h1 {
  margin: 14px 0 18px;
  max-width: 760px;
  font-family: var(--sv-serif);
  font-size: clamp(54px, 7.4vw, 118px);
  line-height: .9;
  font-weight: 400;
}
.sv-hero p {
  max-width: 560px;
  color: rgba(255,245,232,.78);
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.6;
}
.sv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sv-actions a, .sv-product-card a, .sv-checkout-band a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--sv-brass);
  color: #111;
  font-weight: 900;
}
.sv-actions a:nth-child(2) { background: transparent; color: var(--sv-cream); border: 1px solid var(--sv-line); }
.sv-trust-strip {
  position: absolute;
  left: clamp(18px, 5vw, 78px);
  right: clamp(18px, 5vw, 78px);
  bottom: 26px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--sv-line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(5,4,3,.5);
}
.sv-trust-strip span { padding: 14px; color: rgba(255,245,232,.72); font-size: 12px; text-transform: uppercase; }
.sv-cinema {
  position: relative;
  min-height: 88vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: clamp(70px, 8vw, 120px) clamp(18px, 5vw, 78px);
  border-block: 1px solid var(--sv-line);
}
.sv-product-orbit {
  position: absolute;
  inset: 8% 4%;
  z-index: 0;
}
.sv-product-orbit i {
  position: absolute;
  width: clamp(110px, 13vw, 220px);
  aspect-ratio: 1;
  border-radius: 28px;
  border: 1px solid var(--sv-line);
  background: linear-gradient(145deg, rgba(255,245,232,.2), rgba(201,157,85,.08)), #15100d;
  box-shadow: 0 30px 100px rgba(0,0,0,.44);
  transform: translateY(var(--sv-parallax, 0px)) rotate(var(--r, -8deg));
}
.sv-product-orbit i:nth-child(1) { left: 5%; top: 20%; --r: -12deg; }
.sv-product-orbit i:nth-child(2) { left: 28%; top: 8%; --r: 7deg; }
.sv-product-orbit i:nth-child(3) { right: 24%; top: 22%; --r: -5deg; }
.sv-product-orbit i:nth-child(4) { right: 7%; bottom: 16%; --r: 11deg; }
.sv-product-orbit i:nth-child(5) { left: 44%; bottom: 8%; --r: -9deg; }
.sv-cinema-copy {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.sv-cinema h2, .sv-section-head h2, .sv-checkout-band h2 {
  margin: 12px 0 0;
  font-family: var(--sv-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 86px);
  line-height: .95;
}
.sv-cinema p, .sv-section-head p, .sv-product-card p {
  color: rgba(255,245,232,.74);
  line-height: 1.7;
}
.sv-products {
  padding: clamp(70px, 8vw, 120px) clamp(18px, 5vw, 78px);
  border-top: 1px solid var(--sv-line);
}
.sv-section-head { max-width: 860px; margin-bottom: 34px; }
.sv-product-grid-four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.sv-product-card {
  min-height: 480px;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--sv-line);
  border-radius: 8px;
  background: rgba(255,245,232,.055);
  overflow: hidden;
}
.sv-product-visual {
  min-height: 210px;
  display: grid;
  place-items: center;
  margin: -18px -18px 18px;
  background:
    radial-gradient(circle at 45% 35%, rgba(255,245,232,.24), transparent 18%),
    linear-gradient(145deg, rgba(127,35,52,.48), rgba(126,146,119,.18)),
    #130f0d;
  color: rgba(255,245,232,.28);
  font-family: var(--sv-serif);
  font-size: 28px;
  text-align: center;
}
.sv-dog-card .sv-product-visual { background: radial-gradient(circle at 50% 35%, rgba(255,245,232,.22), transparent 18%), linear-gradient(145deg, rgba(126,146,119,.52), rgba(201,157,85,.15)), #130f0d; }
.sv-product-card strong { color: var(--sv-brass); }
.sv-product-card h3 { margin: 10px 0; font-family: var(--sv-serif); font-size: 30px; line-height: 1.05; font-weight: 400; }
.sv-product-card a { margin-top: auto; align-self: start; min-height: 42px; padding-inline: 16px; font-size: 13px; }
.sv-checkout-band {
  padding: clamp(70px, 8vw, 120px) clamp(18px, 5vw, 78px);
  text-align: center;
  background: linear-gradient(135deg, rgba(127,35,52,.5), rgba(201,157,85,.14));
}
.sv-checkout-band h2 { max-width: 840px; margin-inline: auto; }
.sv-checkout-band a { margin-top: 26px; }
.sv-footer {
  padding: 36px clamp(18px, 5vw, 78px);
  border-top: 1px solid var(--sv-line);
  display: flex;
  justify-content: space-between;
  gap: 22px;
  color: var(--sv-muted);
}
.sv-footer p { margin: 0; color: var(--sv-cream); font-family: var(--sv-serif); font-size: 28px; }
@keyframes sv-lick {
  0%, 68%, 100% { transform: translateX(-50%) scaleY(.18); opacity: .2; }
  78%, 88% { transform: translateX(-50%) scaleY(1); opacity: 1; }
}
@keyframes sv-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.08); }
}
@keyframes sv-float {
  from { transform: translate3d(0, 0, 0) rotate(-4deg); }
  to { transform: translate3d(0, -24px, 0) rotate(6deg); }
}
@keyframes sv-frame-drift {
  from { transform: skew(-12deg) rotate(-7deg) translateX(0); }
  to { transform: skew(-8deg) rotate(-4deg) translateX(-22px); }
}
@media (max-width: 980px) {
  .sv-header { grid-template-columns: 1fr; justify-items: center; }
  .sv-cart { justify-self: center; }
  .sv-hero { padding-top: 170px; }
  .sv-cat-face { opacity: .55; right: -14vw; width: 86vw; }
  .sv-product-grid-four, .sv-trust-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sv-nav { gap: 18px; }
  .sv-hero h1 { font-size: 50px; }
  .sv-trust-strip, .sv-product-grid-four { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}