/* ============================================================
   LM Cinematic layer — Campo Operatorio / Prof. Luca Morelli
   Caricato dopo style.css: hero video, trittici, rassegna, motion.
   ============================================================ */
:root{
  --lm-navy:#0B1D3A; --lm-night:#060F1E; --lm-champ:#C8A46B;
  --lm-champ-soft:rgba(200,164,107,.45); --lm-cream:#F7F4EE;
  --lm-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- 1 · Hero interni: .page-head diventa cinema ---------- */
.page-head{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--lm-navy) radial-gradient(120% 90% at 50% 0%, #12305c 0%, var(--lm-navy) 55%, var(--lm-night) 100%);
  color:#fff;
  padding:clamp(118px,15vh,168px) 0 clamp(60px,9vh,92px);
  border-bottom:3px double var(--lm-champ-soft);
}
.page-head .wrap{position:relative; z-index:3}
.page-head h1{color:#fff; font-size:clamp(2.35rem,5.3vw,4.05rem); line-height:1.06; letter-spacing:-.01em; max-width:17ch; text-wrap:balance}
.page-head p, .page-head .wrap p, .page-head .lede{color:rgba(255,255,255,.82); max-width:62ch; font-size:clamp(1rem,1.4vw,1.15rem)}
.page-head h1 + p, .page-head p{margin-top:18px}
.page-head .crumbs, .page-head .crumbs a{color:rgba(255,255,255,.52)}
.page-head .crumbs a:hover{color:#fff}
.page-head .crumbs span{color:var(--lm-champ-soft)}
.page-head h1::after{content:""; display:block; width:76px; height:2px; margin-top:26px;
  background:linear-gradient(90deg,var(--lm-champ),rgba(200,164,107,0));}

.lm-hero-vid{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s ease .15s; filter:saturate(.92) contrast(1.04)}
.lm-hero-vid.is-on{opacity:.5}
.lm-hero-scrim{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,15,30,.88) 0%, rgba(11,29,58,.55) 46%, rgba(6,15,30,.94) 100%)}
.page-head::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(90% 120% at 50% 115%, rgba(200,164,107,.14), transparent 55%)}

/* ---------- 2 · Hero home ---------- */
.hero--video{min-height:clamp(580px,94vh,900px); display:flex; align-items:center;
  background:var(--lm-navy); border-bottom:3px double var(--lm-champ-soft)}
.hero--video__media img{display:none}
.hero--video__media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.6s ease .2s; filter:saturate(.9) contrast(1.05)}
.hero--video__media video.is-on{opacity:.55}
.hero--video .wrap{position:relative}

.hero-portrait{margin:0 0 26px; text-align:left}
.hero-portrait img{width:132px; height:132px; border-radius:50%; object-fit:cover; object-position:50% 12%;
  border:3px double var(--lm-champ); outline:1px solid rgba(200,164,107,.35); outline-offset:10px;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.75); background:#fff; display:block}
.hero-portrait__cap{display:block; margin-top:16px; font-size:.6rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.66)}
@media (min-width:1100px){
  .hero-portrait{position:absolute; right:2%; top:50%; transform:translateY(-52%); margin:0; text-align:center}
  .hero-portrait img{width:clamp(200px,19vw,256px); height:auto; aspect-ratio:1; margin:0 auto;
    animation:lmFloat 7.5s ease-in-out infinite}
}
@keyframes lmFloat{50%{transform:translateY(-9px)}}

.lm-cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:10px; background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.62); font-size:.58rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase}
.lm-cue i{width:1px; height:44px; background:linear-gradient(180deg,var(--lm-champ),transparent);
  animation:lmCue 2.2s var(--lm-ease) infinite}
.lm-cue:hover{color:#fff}
@keyframes lmCue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 3 · Trittico "Dalla sala operatoria" ---------- */
.or-band{background:linear-gradient(180deg,#fff 0%,var(--lm-cream) 30%);
  border-top:3px double var(--lm-champ-soft); padding:clamp(64px,9vh,110px) 0 clamp(72px,10vh,120px)}
.or-band__head{display:flex; align-items:baseline; gap:26px; flex-wrap:wrap; margin-bottom:clamp(30px,4.5vh,48px)}
.ob-kick{font-size:.62rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--lm-champ); white-space:nowrap}
.or-band__head h2{font-size:clamp(1.55rem,2.6vw,2.2rem); color:var(--lm-navy); margin:0}
.ob-rule{flex:1 1 60px; height:1px; background:linear-gradient(90deg,var(--lm-champ-soft),transparent); align-self:center; min-width:40px}
.or-band__grid{display:grid; grid-template-columns:1fr 1.14fr 1fr; gap:clamp(14px,2.2vw,26px); align-items:end}
.or-band__grid figure{margin:0; position:relative}
.or-band__grid img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; border-radius:16px;
  box-shadow:0 26px 60px -28px rgba(11,29,58,.45); transition:transform .8s var(--lm-ease), box-shadow .8s var(--lm-ease)}
.or-band__grid figure:nth-child(2) img{aspect-ratio:3/4}
.or-band__grid figure::before{content:""; position:absolute; inset:12px; border:1px solid rgba(200,164,107,.0);
  border-radius:10px; pointer-events:none; transition:border-color .6s ease; z-index:2}
.or-band__grid figure:hover img{transform:translateY(-6px) scale(1.015); box-shadow:0 40px 80px -30px rgba(11,29,58,.55)}
.or-band__grid figure:hover::before{border-color:rgba(200,164,107,.55)}
.or-band__grid figcaption{margin-top:14px; font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(11,29,58,.62)}
.or-band__grid figcaption::before{content:"+ "; color:var(--lm-champ)}
@media (max-width:860px){
  .or-band__grid{grid-template-columns:1fr; align-items:stretch}
  .or-band__grid img, .or-band__grid figure:nth-child(2) img{aspect-ratio:16/10}
}

/* ---------- 4 · Rassegna stampa + video (Ricerca) ---------- */
.press{background:#fff; padding:clamp(60px,9vh,104px) 0}
.press .video-frame{max-width:920px; margin:clamp(28px,4vh,44px) auto clamp(40px,6vh,64px)}
.press iframe{width:100%; aspect-ratio:16/9; border:0; display:block; border-radius:12px; background:var(--lm-night)}
.press-list{list-style:none; margin:0; padding:0; border-top:1px solid rgba(11,29,58,.12)}
.press-list li{border-bottom:1px solid rgba(11,29,58,.12)}
.press-list a{display:grid; grid-template-columns:150px 1fr auto; gap:20px; align-items:center;
  padding:20px 6px; text-decoration:none; transition:background .35s ease, padding .35s var(--lm-ease)}
.press-list a:hover{background:linear-gradient(90deg,rgba(200,164,107,.08),transparent 70%); padding-left:16px}
.press-list .src{font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--lm-champ)}
.press-list .ttl{font-family:"Playfair Display",serif; font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--lm-navy); line-height:1.3}
.press-list .arr{color:var(--lm-champ); font-size:1.15rem; transition:transform .35s var(--lm-ease)}
.press-list a:hover .arr{transform:translateX(6px)}
@media (max-width:700px){.press-list a{grid-template-columns:1fr auto; row-gap:6px}.press-list .src{grid-column:1/-1}}

/* ---------- 5 · Card Cosa Trattiamo: foto via JS ---------- */
.card-visual--noimg .card-visual__media.has-photo{background-size:cover; background-position:center; position:relative}
.card-visual--noimg .card-visual__media.has-photo::after{content:""; display:block; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,29,58,.12) 30%, rgba(11,29,58,.55) 100%)}
.card-visual--noimg .card-visual__media.has-photo > *{opacity:0}

/* ---------- 6 · Ritratto ufficiale (chi-sono / home) ---------- */
.portrait{position:relative}
.portrait__img{position:relative; z-index:2; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 10%;
  display:block; border-radius:18px; border:1px solid rgba(200,164,107,.4);
  box-shadow:0 34px 80px -32px rgba(11,29,58,.55)}
.portrait .portrait__ph{display:none}

/* ---------- 7 · Reveal on scroll (solo con JS attivo) ---------- */
html.lm-anim .lm-r{opacity:0; transform:translateY(26px)}
html.lm-anim .lm-r.in{opacity:1; transform:none; transition:opacity .95s var(--lm-ease) var(--d,0ms), transform .95s var(--lm-ease) var(--d,0ms)}

/* ---------- 8 · Micro-dettagli ---------- */
::selection{background:var(--lm-champ); color:var(--lm-navy)}
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid var(--lm-champ); outline-offset:3px}
.btn{transition:transform .35s var(--lm-ease), box-shadow .35s var(--lm-ease), background .35s ease, color .35s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 34px -14px rgba(200,164,107,.55)}
.video-frame iframe, .video-frame video{border-radius:12px}

@media (prefers-reduced-motion:reduce){
  html.lm-anim .lm-r{opacity:1; transform:none; transition:none}
  .hero-portrait img{animation:none}
  .lm-cue i{animation:none}
  .lm-hero-vid, .hero--video__media video{display:none}
  html{scroll-behavior:auto}
}