/*
 * MontiniWeb — effetti visivi (v1.0)
 * - testo con gradiente animato nei colori del brand
 * - immagini che si animano con lo scroll (parallasse, reveal con maschera, rotazione)
 * - barra di avanzamento, tilt 3D sulle card portfolio, sfondi sfumati
 * Tutti gli effetti sono disattivati con "riduci movimento" (vedi in fondo).
 */

:root {
  --mw-grad-light: linear-gradient(100deg, #0a6fa8 0%, #079be5 24%, #38b5da 44%, #5b7cf0 66%, #079be5 84%, #0a6fa8 100%);
  --mw-grad-dark: linear-gradient(100deg, #6dcaff 0%, #98dcff 22%, #079be5 46%, #8aa4ff 70%, #6dcaff 100%);
}

/* ---------- 1. Testo con gradiente ----------
 * La sfumatura sulle parole in grassetto dei titoli è in assets/gradient-text.css
 * (caricato anche nell'editor). Qui restano solo l'utility .mw-gradient-text
 * (titoli di articoli e progetti, che nell'editor non si possono mettere in grassetto)
 * e "a Ravenna." nell'header della home. */
.mw-gradient-text, .hero h1 .location { color: #079be5; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .mw-gradient-text, .hero h1 .location {
    background-image: var(--mw-grad-light); background-size: 260% 100%; background-position: 0% 50%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    animation: mw-text-shine 9s ease-in-out infinite alternate;
  }
  .hero h1 .location, .mw-gradient-text.is-on-dark { background-image: var(--mw-grad-dark); }
  .hero h1 .location { animation-duration: 7s; }
}
@keyframes mw-text-shine { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---------- 2. Immagini animate con lo scroll ---------- */
.project-window .wp-block-image { overflow: hidden; }
.project-window img { transform-origin: 50% 50%; will-change: transform; }

/* Ripiego per browser senza animation-timeline: JS imposta --mw-p da 0 a 1 */
html.mw-fallback .project-window img {
  transform: translateY(calc((var(--mw-p, .5) - .5) * -12%)) scale(1.16);
}
html.mw-fallback .care-symbol img {
  transform: rotate(calc(-22deg + var(--mw-p, .5) * 28deg)) scale(calc(.92 + var(--mw-p, .5) * .14));
}

@supports (animation-timeline: view()) {
  /* parallasse interna allo screenshot */
  .project-window img {
    animation: mw-img-parallax linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  /* la finestra si "apre" con una maschera mentre entra nello schermo */
  .project-window {
    animation: mw-window-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  /* il simbolo della sezione cura ruota e cresce con lo scroll */
  .care-symbol img {
    animation: mw-symbol-spin linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .care-symbol:before { animation: mw-ring-a linear both; animation-timeline: view(); }
  .care-symbol:after  { animation: mw-ring-b linear both; animation-timeline: view(); }
}

@keyframes mw-img-parallax {
  from { transform: translateY(-6%) scale(1.16); }
  to   { transform: translateY(6%)  scale(1.16); }
}
@keyframes mw-window-in {
  from { clip-path: inset(9% 7% 9% 7% round 14px); }
  to   { clip-path: inset(-60px round 6px); }
}
@keyframes mw-symbol-spin {
  from { transform: rotate(-22deg) scale(.92); }
  to   { transform: rotate(6deg)   scale(1.06); }
}
@keyframes mw-ring-a {
  from { transform: rotateX(55deg) rotate(-70deg); }
  to   { transform: rotateX(55deg) rotate(10deg); }
}
@keyframes mw-ring-b {
  from { transform: rotateY(55deg) rotate(70deg); }
  to   { transform: rotateY(55deg) rotate(-10deg); }
}

/* Tilt 3D sulle card portfolio (variabili impostate da effects.js) */
.project-card .project-window {
  transform-style: preserve-3d;
}
.project-card:hover .project-window {
  transform: perspective(1000px) rotateX(var(--mw-rx, 0deg)) rotateY(var(--mw-ry, 0deg)) translateY(-5px) scale(1.015);
  box-shadow: 0 26px 46px rgba(7, 155, 229, .22), 0 10px 20px rgba(16, 47, 80, .14);
}
.project-card .project-window.is-tilting { transition: transform .08s linear, box-shadow .4s; }

/* ---------- 3. Barra di avanzamento ---------- */
.mw-progress {
  position: fixed; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #079be5, #6dcaff 55%, #8aa4ff);
  transform-origin: 0 50%;
  transform: scaleX(var(--mw-scroll, 0));
  z-index: 100001; pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .mw-progress { animation: mw-progress linear both; animation-timeline: scroll(root); }
}
@keyframes mw-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 4. Sfondi e micro-effetti ---------- */
.projects {
  background-image:
    radial-gradient(55% 45% at 92% 0%, rgba(7, 155, 229, .13), transparent 70%),
    radial-gradient(40% 35% at 0% 100%, rgba(138, 164, 255, .12), transparent 70%);
}
.care {
  background-image:
    radial-gradient(48% 70% at 18% 55%, rgba(7, 155, 229, .22), transparent 70%),
    radial-gradient(40% 50% at 100% 0%, rgba(138, 164, 255, .14), transparent 70%);
}
.contact {
  background-image: radial-gradient(60% 80% at 100% 0%, rgba(7, 155, 229, .16), transparent 70%);
}

/* sottolineatura sfumata che scorre sui link con freccia */
.line-link { position: relative; border-bottom-color: transparent; }
.line-link:before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #8a9aa0;
}
.line-link:after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--mw-grad-light); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.line-link:hover:after, .line-link:focus-visible:after { transform: scaleX(1); }
.care-content .line-link:before { background: #7b9db8; }
.care-content .line-link:after  { background: var(--mw-grad-dark); }

/* bagliore sul pulsante principale */
.wp-block-button.button-light .wp-block-button__link:hover { box-shadow: 0 10px 30px rgba(7, 155, 229, .35); }

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  .mw-gradient-text, h2 .muted, .project-heading h2, .contact-main em,
  .hero h1 .location, .care-content h2 { animation: none !important; }
  .project-window, .project-window img, .care-symbol img,
  .care-symbol:before, .care-symbol:after, .mw-progress { animation: none !important; }
  .project-window img, .care-symbol img { transform: none !important; }
  .project-card:hover .project-window { transform: none !important; }
  .mw-progress { display: none; }
}

/* Pagina Chi sono: foto */
.about-photo { margin: 0 0 48px; max-width: 980px; }
.about-photo img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 20px 40px rgba(16, 47, 80, .14); }

/* Header delle pagine interne: seconda riga dei titoli sfumata e sfondo animato */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .service-hero .mw-gradient-text,
  .quote-hero .mw-gradient-text,
  .entry-heading .mw-gradient-text {
    background-image: var(--mw-grad-dark);
  }
}
.mw-hero-animated { position: relative; overflow: hidden; isolation: isolate; }
.mw-hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; opacity: .7;
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 10%, #000 55%);
}
@media (max-width: 760px) {
  .mw-hero-canvas { opacity: .4; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
}
@media (prefers-reduced-motion: reduce) {
  .mw-hero-canvas { opacity: .45; }
}

/* Titoli negli header scuri di pagine generiche, archivi, ricerca e 404 */
.entry-heading .wp-block-query-title,
.entry-heading > h1.wp-block-heading {
  font-size: clamp(37px, 5vw, 78px); line-height: 1.08; font-weight: 500;
  letter-spacing: -.05em; max-width: 1180px; margin: 0; overflow-wrap: break-word;
}
.contact-details .contact-methods { margin-top: 0; }

/* Contatti: recapiti diretti con icone */
.contact-details .contact-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; }
.contact-method { margin: 0; }
.contact-method a {
  display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 76px;
  padding: 16px 20px 16px 76px; position: relative; border: 1px solid var(--line); border-radius: 10px;
  background: #fff6; font-size: 17px; letter-spacing: -.01em; color: var(--ink); text-decoration: none;
  transition: border-color .25s, box-shadow .25s, transform .25s; overflow-wrap: anywhere;
}
.contact-method a:hover, .contact-method a:focus-visible { border-color: #079be580; box-shadow: 0 12px 28px rgba(7, 155, 229, .14); transform: translateY(-2px); }
.contact-method a:before {
  content: ''; position: absolute; left: 18px; top: 50%; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%;
  background: linear-gradient(135deg, #079be5, #6dcaff 60%, #8aa4ff);
}
.contact-method a:after {
  content: ''; position: absolute; left: 29px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: #fff;
  -webkit-mask: var(--mw-icon) center / contain no-repeat; mask: var(--mw-icon) center / contain no-repeat;
}
.contact-method.is-email { --mw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.contact-method.is-phone { --mw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.contact-method.is-whatsapp { --mw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.3 7.5L3 21l2-5.5A8.4 8.4 0 1 1 21 11.5z'/%3E%3Cpath d='M9 9.5c.3 1.6 2 3.6 4.5 4.5'/%3E%3C/svg%3E"); }
.contact-method-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5b707b; }
.contact-address { font-size: 14px; line-height: 1.6; color: #5b707b; margin: 0; }
.contact-details { padding-bottom: 20px; }
@media (max-width: 900px) { .contact-details .contact-methods { grid-template-columns: 1fr; } }

/* Home: animazione a tutto sfondo */
.hero.mw-hero-full > #web-canvas {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .8;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.75) 35%, #000 70%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.75) 35%, #000 70%);
}
.hero.mw-hero-full .hero-content, .hero.mw-hero-full .hero-topline, .hero.mw-hero-full .hero-footer { position: relative; z-index: 2; }
@media (max-width: 760px) {
  .hero.mw-hero-full > #web-canvas { opacity: .55; -webkit-mask-image: none; mask-image: none; }
}

/* Home: nastro dei servizi scorrevole e cliccabile */
.expertise-strip.mw-marquee { display: flex; justify-content: flex-start; gap: 0; padding: 0; overflow: hidden; }
.mw-marquee-track {
  display: flex; align-items: center; gap: 48px; padding-right: 48px; flex-shrink: 0;
  animation: mw-marquee 38s linear infinite;
}
.mw-marquee:hover .mw-marquee-track, .mw-marquee:focus-within .mw-marquee-track { animation-play-state: paused; }
.mw-marquee a { color: inherit; text-decoration: none; position: relative; padding: 6px 0; transition: color .25s; }
.mw-marquee a:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mw-grad-light); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s; }
.mw-marquee a:hover, .mw-marquee a:focus-visible { color: #079be5; }
.mw-marquee a:hover:after, .mw-marquee a:focus-visible:after { transform: scaleX(1); }
.mw-marquee .expertise-star { font-size: 24px; color: var(--blue); line-height: 1; }
@keyframes mw-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (max-width: 760px) {
  .mw-marquee-track { gap: 30px; padding-right: 30px; animation-duration: 28s; }
  .mw-marquee .expertise-star { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .expertise-strip.mw-marquee { overflow-x: auto; }
  .mw-marquee-track { animation: none !important; }
  .mw-marquee-track[aria-hidden="true"] { display: none; }
}

/* Menu: voce attiva */
.header .wp-block-navigation a.is-current,
.header li.is-current-parent > .wp-block-navigation-item__content {
  color: #0783ba;
  background-image: linear-gradient(90deg, #079be5, #6dcaff 60%, #8aa4ff);
  background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 100%;
  padding-bottom: 4px; text-decoration: none;
}
.header .wp-block-navigation__submenu-container a.is-current {
  background: #e7f1fb; box-shadow: inset 3px 0 0 #079be5; padding-bottom: 12px;
}
/* il pulsante Preventivo (ultima voce) resta una pillola: bordo blu invece della linea */
.header .wp-block-navigation-item:last-child > a.is-current {
  background: #e7f1fb; border-color: #079be5; padding-bottom: 14px;
}
@media (max-width: 760px) {
  .header .wp-block-navigation__submenu-container a.is-current { padding-bottom: 9px !important; }
}