/* ==========================================================================
   The Vet Legacy — Coming Soon
   Palette extracted from the logo (see README.md for the full breakdown):
   teal #0b5d5d · indigo #0a2a96 · purple #5028a6 · magenta #b9016e · white
   ========================================================================== */

:root{
  /* --- extracted from logo --- */
  --teal-700:   #0b5d5d;
  --indigo-600: #0a2a96;
  --purple-500: #5028a6;
  --magenta-600:#b9016e;
  --white:      #ffffff;

  /* --- derived for UI (not present in the logo itself) --- */
  --cream-50:   #faf7f2;
  --ink-900:    #0a1f1e;
  --line-soft:  rgba(10,31,30,0.12);

  --bg:        var(--cream-50);
  --text:      var(--ink-900);
  --text-soft: rgba(10,31,30,0.72);
  --surface:   var(--white);
  --focus-ring: var(--indigo-600);

  --font-display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gradient-brand: linear-gradient(90deg, var(--teal-700) 0%, var(--indigo-600) 38%, var(--purple-500) 68%, var(--magenta-600) 100%);

  --beat-duration: 5.5s;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* subtle CSS/SVG grain texture — no image file */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:0;
}

a{ color:inherit; }

:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:4px;
}

/* ==========================================================================
   Hero layout
   ========================================================================== */

.hero{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px 28px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%, rgba(11,93,93,0.07), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(185,1,110,0.05), transparent 60%);
}

.logo-wrap{
  width:min(320px, 72vw);
  margin:0 auto 4px;
  position:relative;
  z-index:2;
}
.logo-wrap img{ width:100%; height:auto; display:block; }

.beat-wrap{
  width:min(560px, 92vw);
  margin:8px auto 4px;
  position:relative;
  z-index:2;
}
.beat-svg{ width:100%; height:auto; display:block; overflow:visible; }

h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.8rem, 5vw, 3rem);
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:22px 0 14px;
  max-width:16ch;
  position:relative;
  z-index:2;
}

.sub{
  font-size:clamp(1rem, 2.2vw, 1.15rem);
  line-height:1.65;
  max-width:46ch;
  margin:0 auto 30px;
  color:var(--text-soft);
  position:relative;
  z-index:2;
}
.sub strong{ color:var(--text); font-weight:600; }

/* ==========================================================================
   CTAs
   ========================================================================== */

.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-bottom:34px;
  position:relative;
  z-index:2;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 26px;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  border:2px solid transparent;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.btn .icon{ width:20px; height:20px; fill:currentColor; flex:none; }

.btn-primary{
  background:var(--teal-700);
  color:var(--white);
  box-shadow:0 6px 20px rgba(11,93,93,0.28);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(11,93,93,0.36); }
.btn-primary:active{ transform:translateY(0); }

.btn-secondary{
  background:transparent;
  color:var(--indigo-600);
  border-color:var(--indigo-600);
}
.btn-secondary:hover{
  color:var(--white);
  background:var(--gradient-brand);
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(80,40,166,0.28);
}
.btn-secondary:active{ transform:translateY(0); }

/* ==========================================================================
   Launch line / countdown
   ========================================================================== */

.launch-line{ position:relative; z-index:2; margin-bottom:38px; }

.launching{
  margin:0 0 12px;
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-soft);
}

.countdown{
  display:flex;
  gap:14px;
  justify-content:center;
}
.countdown[hidden]{ display:none; }
.cd-unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:56px;
  padding:10px 6px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--line-soft);
}
.cd-unit span{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:600;
  line-height:1;
}
.cd-unit small{
  margin-top:4px;
  font-size:0.65rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-soft);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.socials{ display:flex; gap:18px; }
.socials a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  color:var(--text-soft);
  transition:color 0.18s ease, background-color 0.18s ease;
}
.socials a:hover{ color:var(--white); background:var(--gradient-brand); }
.socials svg{ width:20px; height:20px; fill:currentColor; }

.copyright{
  margin:0;
  font-size:0.8rem;
  color:var(--text-soft);
}

/* ==========================================================================
   Heartbeat Paw animation
   ========================================================================== */

.beat-line{ vector-effect:non-scaling-stroke; }

.beat-glow{
  opacity:0.55;
}

.beat-main,
.beat-glow{
  stroke-dasharray:1500;
  stroke-dashoffset:1500;
  animation:beat-draw var(--beat-duration) cubic-bezier(0.45,0,0.2,1) infinite;
}
.beat-glow{ animation-name:beat-draw-glow; }

@keyframes beat-draw{
  0%   { stroke-dashoffset:1500; }
  62%  { stroke-dashoffset:0; }
  100% { stroke-dashoffset:0; opacity:1; }
}
/* glow trace fades in slightly after the main line so it reads as a pulse, not a duplicate */
@keyframes beat-draw-glow{
  0%   { stroke-dashoffset:1500; opacity:0; }
  40%  { opacity:0.55; }
  64%  { stroke-dashoffset:0; opacity:0.55; }
  78%  { opacity:0.15; }
  100% { stroke-dashoffset:0; opacity:0.15; }
}

/* ==========================================================================
   Ambient background paw prints — barely-noticeable atmosphere
   ========================================================================== */

.ambient-paws{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.paw{
  position:absolute;
  width:34px;
  height:34px;
  fill:var(--teal-700);
  opacity:0;
  animation:paw-drift 14s ease-in infinite;
}
.paw.p1{ left:8%;  bottom:-5%; width:28px; animation-delay:0s;   fill:var(--teal-700); }
.paw.p2{ left:22%; bottom:-5%; width:22px; animation-delay:2.2s; fill:var(--indigo-600); animation-duration:16s; }
.paw.p3{ left:40%; bottom:-5%; width:30px; animation-delay:5s;   fill:var(--purple-500); animation-duration:13s; }
.paw.p4{ left:58%; bottom:-5%; width:20px; animation-delay:1.1s; fill:var(--teal-700); animation-duration:17s; }
.paw.p5{ left:74%; bottom:-5%; width:26px; animation-delay:7.5s; fill:var(--magenta-600); animation-duration:15s; }
.paw.p6{ left:88%; bottom:-5%; width:24px; animation-delay:3.8s; fill:var(--indigo-600); animation-duration:18s; }
.paw.p7{ left:50%; bottom:-5%; width:18px; animation-delay:9.2s; fill:var(--purple-500); animation-duration:12s; }

@keyframes paw-drift{
  0%   { opacity:0; transform:translateY(0) rotate(-6deg); }
  12%  { opacity:0.12; }
  55%  { opacity:0.1; }
  85%  { opacity:0; }
  100% { opacity:0; transform:translateY(-70vh) rotate(6deg); }
}

/* ==========================================================================
   Reduced motion — static final-frame fallback, no looping motion at all
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  .beat-main, .beat-glow{ animation:none; stroke-dashoffset:0; }
  .beat-glow{ opacity:0.22; }

  .paw{ animation:none; opacity:0.08; bottom:10%; }

  .btn, .btn-primary, .btn-secondary, .socials a{ transition:none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 640px){
  .beat-wrap{ margin-top:12px; }
}

@media (min-width: 1024px){
  .hero{ padding:56px 20px 36px; }
  .logo-wrap{ width:360px; }
  .beat-wrap{ width:640px; }
}

@media (max-width: 380px){
  .cta-row{ flex-direction:column; align-items:stretch; width:100%; max-width:280px; }
  .btn{ justify-content:center; }
}