/* ocean.css — oceano vivo, hero, vetrina sommersa, micro-interazioni. Nessuno stile inline: tutto qui.
   Si appoggia alle variabili di shop-v6.css (--navy, --gold, --serif...). */

/* ---------- livello oceano (fisso, dietro i contenuti) ---------- */
html{background:#04101e}
.oc{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
   radial-gradient(60% 40% at 30% 4%,rgba(120,200,210,.28),transparent 70%),
   radial-gradient(90% 30% at 50% 100%,rgba(70,56,36,.7),transparent 70%),
   linear-gradient(180deg,#0a4560 0%,#08304f 28%,#071f3b 60%,#040e1f 100%)}
.oc canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.oc__gl{opacity:0;transition:opacity 1.4s ease}
.oc--gl .oc__gl{opacity:1}
body[data-ocean]{background:transparent}
body[data-ocean] main,body[data-ocean] .foot{position:relative;z-index:1}
body[data-ocean] .foot{background:linear-gradient(180deg,rgba(4,12,24,.72),rgba(3,9,18,.9))}
body[data-ocean] .marquee{background:rgba(4,12,24,.6);backdrop-filter:blur(4px)}
body[data-ocean] .sect--ink{background:linear-gradient(180deg,rgba(3,11,22,.64),rgba(3,11,22,.78))}
body[data-ocean] .sect--navy2{background:rgba(12,34,64,.58)}
body[data-ocean] .pagehead--img::before{opacity:.12}
body[data-ocean] .grain{opacity:.06}

/* ---------- hero ---------- */
body[data-ocean] .hero{background:transparent;min-height:calc(100svh - var(--chrome-h));isolation:isolate}
body[data-ocean] .hero::before{background:radial-gradient(110% 80% at 30% 40%,transparent 35%,rgba(3,12,24,.55) 100%),linear-gradient(180deg,rgba(3,12,24,.18) 0%,transparent 26%)}
body[data-ocean] .hero__in{position:relative;z-index:3}
.oc-hero-crab{position:absolute;z-index:1;right:-5vw;top:10%;width:min(46vw,680px);aspect-ratio:720/600;pointer-events:none}
.oc-hero-crab img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.oc-on .oc-hero-crab img,.oc-on .oc-ph-crab img{opacity:0}
.oc-hero-crab img,.oc-ph-crab img{transition:opacity .6s}
.hero--oc .hero__cap{writing-mode:horizontal-tb;right:var(--pad);top:auto;bottom:18px;z-index:3}
.hero--oc .hero__scroll{z-index:3}
.hero--oc .lead{max-width:42ch}
.hero--oc h1{max-width:14ch;text-shadow:0 4px 40px rgba(0,10,25,.55)}
.hero--oc h1 em,.oc-ph h1 em{background:linear-gradient(100deg,#9a722e 0%,#E6C98A 30%,#fff3cf 50%,#E6C98A 70%,#9a722e 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:oc-shine 7s ease-in-out infinite}
@keyframes oc-shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.hero--oc .hero__in>*{animation:oc-emerge 1.4s cubic-bezier(.2,.75,.15,1) both}
.hero--oc .hero__in>*:nth-child(2){animation-delay:.18s}
.hero--oc .hero__in>*:nth-child(3){animation-delay:.34s}
.hero--oc .hero__in>*:nth-child(4){animation-delay:.5s}
.js .hero--oc .hero__in>[data-reveal]{opacity:1;transform:none;transition:none}
@keyframes oc-emerge{from{opacity:0;transform:translateY(34px);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
.oc-hero-crab{animation:oc-rise 2.2s cubic-bezier(.2,.75,.15,1) both .3s}
@keyframes oc-rise{from{opacity:0;transform:translateY(60px) scale(.94)}to{opacity:1;transform:none}}

/* ---------- testata delle pagine interne ---------- */
body[data-ocean] .pagehead{min-height:min(60vh,520px);display:flex;align-items:center;overflow:visible;isolation:isolate}
body[data-ocean] .pagehead .wrap{z-index:3;width:100%}
.oc-ph h1{max-width:15ch;text-shadow:0 4px 40px rgba(0,10,25,.55)}
.oc-ph .lead{max-width:48ch;color:rgba(246,241,231,.86)}
.oc-ph-crab{position:absolute;z-index:1;right:2vw;top:50%;margin-top:calc(min(24vw,330px)*-.5);width:min(36vw,480px);aspect-ratio:720/560;pointer-events:none}
.oc-ph-crab img{width:100%;height:100%;object-fit:contain}
.oc-ph .eyebrow{animation:oc-emerge 1.2s cubic-bezier(.2,.75,.15,1) both}
.oc-ph h1{animation:oc-emerge 1.3s cubic-bezier(.2,.75,.15,1) both .12s}
.oc-ph .lead{animation:oc-emerge 1.3s cubic-bezier(.2,.75,.15,1) both .26s}
.js .oc-ph [data-reveal]{opacity:1;transform:none;transition:none}
.oc-cap{position:absolute;z-index:3;right:var(--pad);bottom:14px;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-2)}

/* ---------- nastro ticker nella pagina ---------- */
.oc-tkband{position:relative;padding:clamp(36px,5vw,72px) 0 clamp(28px,4vw,56px)}
.oc-tkband .wrap{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.oc-tkband .eyebrow{margin-bottom:0}
.oc-tkband__t{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.05}
.oc-tkband__t em{font-style:italic;color:var(--gold-hi)}

/* ---------- vetrina sommersa ---------- */
.oc-show{padding:clamp(70px,10vw,150px) 0 clamp(80px,11vw,170px);overflow:hidden}
.oc-show__head{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,56px)}
.oc-show__head .lead{max-width:44ch}
.oc-emb{display:flex;gap:18px;align-items:center}
.oc-emb figure{display:grid;gap:6px;justify-items:center;margin:0}
.oc-emb img{width:76px;height:auto}
.oc-emb figcaption{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2);text-align:center;max-width:12ch}
.oc-show__stage{--mx:0;--my:0;--sy:0;position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(52px,6.2vw,92px);gap:clamp(10px,1.6vw,22px);perspective:1200px}
.oc-port{--z:.6;position:relative;margin:0;transform:translate3d(calc(var(--mx)*var(--z)*-26px),calc(var(--my)*var(--z)*-18px + var(--sy)*var(--z)*-46px),0);transition:transform .35s cubic-bezier(.2,.75,.15,1);will-change:transform}
.oc-port a{display:block;height:100%;text-decoration:none;color:inherit}
.oc-port__in{height:100%;position:relative;overflow:hidden;border:1px solid rgba(230,201,138,.55);background:#06111f;box-shadow:0 30px 60px -24px rgba(0,0,0,.75),inset 0 0 0 5px rgba(6,17,31,.9),inset 0 0 0 6px rgba(201,169,98,.35);animation:oc-float var(--fd,9s) ease-in-out infinite;animation-delay:var(--fl,0s);transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:border-color .4s,box-shadow .4s}
.oc-port a:hover .oc-port__in,.oc-port a:focus-visible .oc-port__in{border-color:var(--gold-hi);box-shadow:0 40px 80px -24px rgba(0,0,0,.8),0 0 40px -6px rgba(230,201,138,.35),inset 0 0 0 5px rgba(6,17,31,.9),inset 0 0 0 6px rgba(230,201,138,.6)}
.oc-port a:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}
.oc-port img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s cubic-bezier(.2,.75,.15,1)}
.oc-port a:hover img{transform:scale(1.08)}
.oc-port__in::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 46%,rgba(4,18,36,.78) 100%),linear-gradient(135deg,rgba(150,220,235,.18),transparent 38%,transparent 70%,rgba(0,40,70,.35))}
.oc-port__in::after{content:"";position:absolute;inset:-30%;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.12) 50%,transparent 58%);transform:translateX(-60%);animation:oc-glint 8s ease-in-out infinite;animation-delay:var(--fl,0s)}
.oc-port--round .oc-port__in{border-radius:50%}
.oc-port--arch .oc-port__in{border-radius:48% 48% 6px 6px / 28% 28% 6px 6px}
.oc-port--round img{object-position:50% 45%}
.oc-port figcaption{position:absolute;left:0;right:0;bottom:-2px;z-index:4;text-align:center;pointer-events:none;transform:translateY(100%);padding-top:10px}
.oc-port .oc-lab{display:inline-block;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);border:1px solid rgba(230,201,138,.45);padding:3px 7px;margin-right:8px;background:rgba(6,17,31,.7)}
.oc-port .oc-nm{font-family:var(--serif);font-size:1.1rem;color:var(--paper)}
.oc-port--a{grid-column:1/5;grid-row:1/6;--z:.5;--fd:9s}
.oc-port--b{grid-column:5/8;grid-row:2/6;--z:.9;--fd:11s;--fl:-3s}
.oc-port--c{grid-column:8/13;grid-row:1/5;--z:.4;--fd:10s;--fl:-6s}
.oc-port--d{grid-column:2/6;grid-row:7/12;--z:1;--fd:12s;--fl:-2s}
.oc-port--e{grid-column:6/9;grid-row:7/11;--z:.7;--fd:9.5s;--fl:-5s}
.oc-port--f{grid-column:9/13;grid-row:6/11;--z:.55;--fd:10.5s;--fl:-8s}
.oc-show__stage{margin-bottom:clamp(40px,5vw,70px)}
.oc-show__foot{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:clamp(60px,6vw,90px)}
.oc-show__foot .small{max-width:60ch}
@keyframes oc-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes oc-glint{0%,60%,100%{transform:translateX(-60%)}80%{transform:translateX(60%)}}

/* ---------- profondimetro e interruttore ---------- */
.oc-gauge{position:fixed;right:clamp(8px,1.4vw,22px);top:50%;transform:translateY(-50%);z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(246,241,231,.62);writing-mode:vertical-rl;pointer-events:none;--d:0%}
.oc-gauge__l{writing-mode:horizontal-tb;position:relative;width:2px;height:min(34vh,260px);background:linear-gradient(180deg,rgba(230,201,138,.15),rgba(230,201,138,.55));border-radius:2px}
.oc-gauge__d{position:absolute;left:50%;top:var(--d);width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 14px 2px rgba(230,201,138,.7)}
.oc-tog{position:fixed;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,24px);z-index:120;font:500 .66rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);background:rgba(6,17,31,.82);border:1px solid rgba(230,201,138,.5);padding:10px 14px;border-radius:999px;cursor:pointer;backdrop-filter:blur(8px);transition:background .3s,color .3s}
.oc-tog:hover{background:var(--gold-hi);color:var(--navy)}
.oc-tog:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- micro-interazioni ---------- */
.oc-on .tgt__c,.oc-on .pcard,.oc-on .svc{transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .35s cubic-bezier(.2,.75,.15,1),border-color .4s,box-shadow .5s}
.oc-on .svc:hover,.oc-on .tgt__c:hover{transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-4px)}
.oc-on .tgt__c{background:rgba(6,17,31,.74);backdrop-filter:blur(6px)}
.oc-on .tgt__c:hover{box-shadow:0 26px 60px -28px rgba(0,0,0,.8),0 0 0 1px rgba(230,201,138,.4)}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7;transition:width .8s cubic-bezier(.2,.75,.15,1)}
.is-in .eyebrow::before,.eyebrow.is-in::before{width:56px}
.btn:active{transform:translateY(0) scale(.985)}

/* ---------- reattività ---------- */
@media (max-width:900px){
  .oc-show__stage{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(40px,10.5vw,70px)}
  .oc-port--a{grid-column:1/4;grid-row:1/5}
  .oc-port--b{grid-column:4/7;grid-row:2/6}
  .oc-port--c{grid-column:1/5;grid-row:6/9}
  .oc-port--d{grid-column:2/6;grid-row:10/14}
  .oc-port--e{grid-column:1/4;grid-row:15/18}
  .oc-port--f{grid-column:4/7;grid-row:14/18}
  .oc-hero-crab{width:min(78vw,520px);right:-6vw;top:4%}
  .oc-ph-crab{width:min(52vw,320px);right:-4vw;top:12%;margin-top:0;opacity:.85}
  .oc-gauge{display:none}
}
@media (max-width:640px){
  .oc-hero-crab{width:84vw;right:-22vw;top:0}
  .oc-ph-crab{display:none}
  .oc-port figcaption{display:none}
  .oc-emb img{width:60px}
}
@media (max-width:480px){
  .oc-tog{bottom:76px}
}

/* ---------- movimento ridotto / spento: versione statica ---------- */
@media (prefers-reduced-motion:reduce){
  .oc__gl{transition:none}
  .hero--oc .hero__in>*,.oc-hero-crab,.oc-ph .eyebrow,.oc-ph h1,.oc-ph .lead{animation:none}
  .hero--oc h1 em,.oc-ph h1 em{animation:none;background-position:50% 0}
  .oc-port,.oc-port__in,.oc-port__in::after{animation:none;transition:none}
  .oc-port__in{transform:none}
}
html.rm .oc-port__in,html.rm .oc-port__in::after,html.rm .hero--oc h1 em{animation:none}

/* ---------- emblemi (pagina marchio) ---------- */
.oc-emb2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,26px)}
.oc-emb2__i{margin:0;display:grid;gap:12px;justify-items:center;padding:clamp(22px,3vw,40px) 16px 16px;border:1px solid rgba(230,201,138,.5)}
.oc-emb2__i--dark{background:linear-gradient(160deg,#0F2747,#0A1A30)}
.oc-emb2__i--light{background:linear-gradient(160deg,#F6F1E7,#E9DFC9);border-color:#B88A3D}
.oc-emb2__i img{width:min(100%,170px);height:auto}
.oc-emb2__i figcaption{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase}
.oc-emb2__i--dark figcaption{color:var(--gold-hi)}
.oc-emb2__i--light figcaption{color:#5d4416}
@media (max-width:520px){.oc-emb2{grid-template-columns:1fr}}