/* The Print Pirate — shared styles.
   The page markup carries the design's inline styles (they ARE the spec);
   this file holds the keyframes, base rules, photo-slot placeholders, and the
   responsive overrides that keep the fixed desktop layouts usable on mobile. */

body{margin:0;background:#050505;font-family:Spectral,serif}
a{color:#E8DFC6;text-decoration:none}
a:hover{color:#F3ECD8}
img{max-width:100%}
input::placeholder,textarea::placeholder{color:rgba(231,217,176,.35)}

/* animations (pulse used site-wide; the rest drive the Home printer SVG) */
@keyframes pp-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pp-shuttle{0%{transform:translateX(0)}50%{transform:translateX(140px)}100%{transform:translateX(0)}}
@keyframes pp-zaxis{0%{transform:translateY(160px)}92%,100%{transform:translateY(0)}}
@keyframes pp-build{0%{transform:scaleY(.02)}92%,100%{transform:scaleY(1)}}
@keyframes pp-fill{0%{transform:scaleX(.02)}92%,100%{transform:scaleX(1)}}
@keyframes pp-feed{to{stroke-dashoffset:-24}}
@keyframes pp-scanhide{0%,86%{opacity:1}93%,100%{opacity:0}}
@keyframes pp-flicker{0%,100%{opacity:.9}20%{opacity:.5}45%{opacity:1}70%{opacity:.6}}
@keyframes pp-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pp-ember{0%{transform:translateY(0);opacity:0}12%{opacity:.9}100%{transform:translateY(-120px);opacity:0}}
@keyframes pp-bedline{0%,100%{opacity:.25}50%{opacity:.7}}

/* product-photo placeholder (real <img> drops in when photos arrive) */
.pp-slot{
  width:100%;height:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:14px;gap:8px;flex-direction:column;
  background:
    linear-gradient(135deg,rgba(232,223,198,.04),transparent 60%),
    #0E0F12;
  border:1px dashed rgba(232,223,198,.18);
  color:rgba(231,217,176,.4);
  font-family:Almendra,serif;font-style:italic;font-size:12.5px;line-height:1.4;
}
.pp-slot svg{opacity:.5}
.pp-slot img{width:100%;height:100%;object-fit:contain;display:block}
.pp-slot.filled{border:0;padding:0;background:#0E0F12}

/* keep the Home printer SVG fluid */
.pp-printer svg{width:100%;height:auto;max-width:560px}

/* the printer sits cold until the stream is live (pp.js removes .pp-idle) */
.pp-printer.pp-idle svg *{animation-play-state:paused !important}
.pp-printer.pp-idle svg .pp-hot{opacity:0 !important}

/* mobile menu button (injected by pp.js; hidden on desktop) */
.pp-menu-btn{display:none;background:none;border:1px solid rgba(232,223,198,.45);color:#E8DFC6;width:46px;height:42px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.pp-menu-btn svg{display:block}

/* ---- responsive ---- */
@media (max-width:900px){
  .pp-nav{flex-wrap:wrap;gap:0;padding:14px 20px !important;align-items:center}
  .pp-menu-btn{display:inline-flex}
  /* links collapse into a full-width dropdown toggled by the hamburger */
  .pp-navlinks{display:none !important;flex-basis:100%;width:100%;flex-direction:column;align-items:stretch;gap:0 !important;margin-top:12px}
  .pp-nav.pp-nav-open .pp-navlinks{display:flex !important}
  .pp-navlinks > a{border:0 !important;border-top:1px solid rgba(232,223,198,.14) !important;border-radius:0 !important;background:transparent !important;padding:15px 4px !important;width:100%;box-sizing:border-box;font-size:13px !important;letter-spacing:.14em}
  .pp-navlinks > a:last-child{border-bottom:1px solid rgba(232,223,198,.14) !important}
  .pp-printer{grid-template-columns:1fr !important;margin:20px 20px 48px !important}
  .pp-printer .pp-copy{padding:34px 24px !important}
  .pp-grid4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .pp-grid3{grid-template-columns:1fr !important}
  .pp-cart,.pp-live,.pp-about,.pp-contact,.pp-product{grid-template-columns:1fr !important}
  .pp-badges{grid-template-columns:repeat(2,1fr) !important;padding:6px 24px 24px !important}
  /* hero CTAs drop below the banner (the ultra-wide banner is short on phones,
     so overlaying them covered the artwork) — centered + stacked */
  .pp-hero-cta{position:static !important;left:auto !important;right:auto !important;bottom:auto !important;flex-direction:column;align-items:center;gap:14px;padding:22px 20px 6px}
  .pp-hero-cta a{width:100%;max-width:340px;text-align:center;box-sizing:border-box}
  .pp-gutter{padding-left:20px !important;padding-right:20px !important}
  .pp-summary{position:static !important}
  .pp-commission{flex-direction:column;align-items:flex-start !important;gap:16px !important}
  .pp-footer{flex-direction:column;gap:12px;text-align:center;align-items:center}
  .pp-footer > span{justify-content:center;flex-wrap:wrap;row-gap:8px}
}
@media (max-width:520px){
  .pp-grid4{grid-template-columns:1fr !important}
  .pp-hero-cta{flex-direction:column;align-items:center}
  .pp-title-52{font-size:38px !important}
  .pp-title-48{font-size:36px !important}
  .pp-cart-row{grid-template-columns:70px 1fr !important;row-gap:10px}
}