/* Pengevask marketing site — shared design tokens & effects.
   Palette is Pantone-inspired: Classic Blue 19-4052, Living Coral 16-1546,
   Neo Mint, Brass, on warm cream paper. */
:root {
  --paper: #f4ede2;
  --paper-2: #ebe1d1;
  --ink: #1b2a33;
  --ink-2: #4a5b66;
  --blue: #0f4c81;
  --blue-2: #0b3a63;
  --sky: #d7e6f5;
  --coral: #ff6f61;
  --coral-2: #e35a4d;
  --mint: #98ddca;
  --brass: #c9a227;
}

html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; }

.font-display { font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144, "SOFT" 50; }
.font-swung { font-family: "Instrument Serif", Georgia, serif; }
.font-body { font-family: "Manrope", system-ui, sans-serif; }

/* ---- paper grain (the "noisy" element) ---- */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.grain > * { position: relative; z-index: 2; }
.grain-strong::after { opacity: .9; }

/* ---- soft blobs ---- */
.blob { position: absolute; border-radius: 9999px; filter: blur(60px); opacity: .55; pointer-events: none; }

/* ---- halftone dots ---- */
.dots { background-image: radial-gradient(var(--ink) .8px, transparent .9px); background-size: 14px 14px; opacity: .12; }

/* ---- washing-machine spinner: starts slow, then runs ---- */
@keyframes drum-start { from { transform: rotate(0); } to { transform: rotate(540deg); } }
@keyframes drum-run   { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes wobble     { 0%,100% { transform: translate(0,0); } 30% { transform: translate(.6px,-.4px); } 60% { transform: translate(-.5px,.5px); } }
.washer .drum {
  transform-origin: 50% 50%;
  animation: drum-start 2.6s cubic-bezier(.55, 0, .9, .3) 1, drum-run 1.1s linear 2.6s infinite;
}
.washer .body { animation: wobble .18s linear 2.6s 12; transform-origin: center; }
.washer .led { animation: blink 1.3s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .washer .drum, .washer .body { animation: none; } }

/* ---- marquee strip ---- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { overflow: hidden; white-space: nowrap; }
.marquee > div { display: inline-flex; animation: marquee 28s linear infinite; }
.marquee:hover > div { animation-play-state: paused; }

/* ---- hero slideshow (Ken Burns crossfade) ---- */
@keyframes kb { 0% { opacity: 0; transform: scale(1.02); } 8% { opacity: 1; } 33% { opacity: 1; } 41% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0; } }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: kb 18s ease-in-out infinite; }
.slides img:nth-child(2) { animation-delay: 6s; }
.slides img:nth-child(3) { animation-delay: 12s; }

/* ---- reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- the "V5" look: light sheen hero + soft white bento cards ---- */
.sheen { background: radial-gradient(120% 80% at 50% 0%, #ffffff 0%, var(--sky) 45%, var(--paper) 100%); }
.bento { background: #fff; border: 1px solid rgba(27,42,51,.07); border-radius: 1.75rem; box-shadow: 0 20px 50px -30px rgba(15,76,129,.25); }
.pill { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(27,42,51,.1); padding: .5rem 1rem; border-radius: 9999px; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.prog circle.p { stroke-dasharray: 226; stroke-dashoffset: 80; animation: ring 3s ease-out forwards; }

/* ---- misc ---- */
.underline-swash { background: linear-gradient(transparent 62%, rgba(255,111,97,.45) 62%, rgba(255,111,97,.45) 88%, transparent 88%); }
.ring-paper { box-shadow: 0 0 0 6px var(--paper); }
.phone { aspect-ratio: 9/17; border-radius: 2.4rem; background: var(--ink); padding: .5rem; box-shadow: 0 30px 60px -20px rgba(27,42,51,.45); display: flex; }
.phone > div { border-radius: 2rem; overflow: hidden; flex: 1; min-height: 100%; background: var(--paper); display: flex; flex-direction: column; }
pv-washer, pv-mark { display: block; flex-shrink: 0; }
.washer { display: block; }
.phone .tabbar { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: .6rem; padding: .5rem 0 .25rem; border-top: 1px solid rgba(27,42,51,.08); color: var(--ink-2); }
.phone .tabbar b { color: var(--blue); font-weight: 700; }
@media (min-width: 768px) { .tilt-l { transform: rotate(-4deg); } .tilt-r { transform: rotate(3deg); } }
.scroll-x { scrollbar-width: none; } .scroll-x::-webkit-scrollbar { display: none; }