/* Riccio di Marketing — exported site styles */

@font-face {
  font-family: 'Playfair Display';
  src: url('assets/fonts/playfair-display.regular.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter.regular.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('assets/fonts/caveat.regular.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-brown-900: #2C1A0E;
  --color-brown-700: #4A2509;
  --color-brown-600: #7C3D18;
  --color-blue-300: #A8C8E0;
  --color-blue-400: #7A9DB5;
  --color-rust-500: #B05D2E;
  --color-gold-300: #EDD96A;
  --color-cream-50: #FAF6EE;
  --color-white: #FFFFFF;

  --surface-page: var(--color-cream-50);
  --surface-card: var(--color-white);
  --surface-sunken: #F1EADA;
  --surface-inverse: var(--color-brown-900);

  --text-ink: var(--color-brown-900);
  --text-secondary: #5B4738;
  --text-muted: #8A7A6A;
  --text-on-inverse: var(--color-cream-50);
  --text-link: var(--color-rust-500);
  --text-link-hover: var(--color-brown-700);

  --accent-primary: var(--color-brown-700);
  --accent-primary-hover: var(--color-brown-900);
  --accent-support: var(--color-rust-500);
  --accent-support-hover: #964d24;
  --accent-emphasis: var(--color-gold-300);
  --accent-secondary: var(--color-blue-400);
  --accent-secondary-soft: var(--color-blue-300);

  --border-subtle: rgba(44, 26, 14, 0.12);
  --border-default: rgba(44, 26, 14, 0.22);
  --border-strong: var(--color-brown-900);

  --shadow-color: 28, 16, 8;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.08);
  --shadow-md: 0 4px 16px rgba(var(--shadow-color), 0.10);
  --shadow-lg: 0 12px 32px rgba(var(--shadow-color), 0.14);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Caveat', cursive;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { margin: 0; }
img, video { max-width: 100%; display: block; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

@keyframes heroFadeIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes floatBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes waPulse {
  0% { box-shadow: 0 0 0 0 rgba(176,93,46,0.45); }
  70% { box-shadow: 0 0 0 14px rgba(176,93,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(176,93,46,0); }
}
@keyframes blobMorph {
  0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
  50% { border-radius: 40% 60% 44% 56% / 48% 38% 62% 52%; }
}
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Kicker tags (handwritten pre-title label) ---- */
.kicker {
  display: inline-block;
  font-family: var(--font-script);
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--accent-support);
  margin-bottom: 6px;
}
.kicker.rot-l { transform: rotate(-2deg); }
.kicker.rot-r { transform: rotate(1.5deg); }

/* ---- Hand-drawn squiggle underline, draws in on reveal ---- */
.title-squiggle { display: block; margin: 10px auto 16px; overflow: visible; }
.title-squiggle path {
  fill: none;
  stroke: var(--accent-secondary);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  transition: stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) 0.25s;
}
[data-shown="true"] .title-squiggle path { stroke-dashoffset: 0; }

/* ---- Scrapbook tilt for cards/photos: alternating rest angle, straightens + lifts on hover ---- */
.tilt-card {
  --tilt-rest: -1.6deg;
  transform: rotate(var(--tilt-rest));
  transition: transform 0.35s var(--ease-standard), box-shadow 0.35s var(--ease-standard);
}
[data-reveal-item]:nth-child(even) .tilt-card { --tilt-rest: 1.8deg; }
[data-reveal-item]:nth-child(3n) .tilt-card { --tilt-rest: -1.2deg; }
.tilt-card:hover { transform: rotate(0deg) translateY(-8px) scale(1.02); box-shadow: var(--shadow-lg); }

/* ---- Organic icon blobs (varied per service, not a uniform circle) ---- */
.icon-blob {
  animation: blobMorph 7s ease-in-out infinite, floatBob 4.5s ease-in-out infinite;
}
.icon-blob.hue-1 { background: var(--accent-secondary-soft); border: 2px solid var(--accent-secondary); }
.icon-blob.hue-2 { background: rgba(176,93,46,0.16); border: 2px solid var(--accent-support); }
.icon-blob.hue-3 { background: rgba(74,37,9,0.12); border: 2px solid var(--accent-primary); }
.icon-blob.hue-4 { background: rgba(237,217,106,0.28); border: 2px solid var(--accent-emphasis); }

/* ---- Marquee ticker ---- */
.marquee { overflow: hidden; white-space: nowrap; background: var(--color-brown-900); }
.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: marqueeScroll 26s linear infinite;
}
.marquee-group { display: inline-flex; align-items: center; }
.marquee-item {
  font-family: var(--font-display);
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 700;
  color: var(--accent-emphasis);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 28px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
}
.marquee-item::after { content: '✦'; color: var(--accent-secondary-soft); font-size: 0.7em; }

/* ---- Playful button hover ---- */
.btn-playful { transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s var(--ease-standard); }
.btn-playful:hover { transform: translateY(-3px) rotate(-1.2deg) scale(1.035); box-shadow: var(--shadow-lg); }

/* ---- Reveal-on-scroll ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(46px) scale(0.97);
  transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
}
[data-reveal][data-shown="true"] { opacity: 1; transform: none; }
[data-reveal-item] {
  --tilt-from: -3deg;
  opacity: 0;
  transform: translateY(34px) rotate(var(--tilt-from)) scale(0.96);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
[data-reveal-item]:nth-child(even) { --tilt-from: 3deg; }
[data-shown="true"] [data-reveal-item] { opacity: 1; transform: none; }
[data-reveal-item]:nth-child(2) { transition-delay: 0.11s; }
[data-reveal-item]:nth-child(3) { transition-delay: 0.22s; }
[data-reveal-item]:nth-child(4) { transition-delay: 0.33s; }
[data-reveal-item]:nth-child(5) { transition-delay: 0.44s; }
[data-reveal-item]:nth-child(6) { transition-delay: 0.55s; }

[data-carousel-nav]:disabled { opacity: 0.4; }
[data-dot="true"] { background: var(--accent-secondary); }
[data-dot="false"] { background: var(--accent-secondary-soft); }

.hover-lift { transition: transform 0.3s var(--ease-standard), box-shadow 0.3s var(--ease-standard); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal], [data-reveal-item] { opacity: 1 !important; transform: none !important; }
  .tilt-card, .tilt-card:hover { transform: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 680px) {
  .marquee-track { animation-duration: 16s; }
}