/* Devlon site additions: hero slider, light motion, forms, video. Layout is unchanged. */

/* ---- Home hero slider (single slide looks exactly like the original banner) */
.hero-slides{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.hero-slide{position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; opacity:0; transition:opacity 1.2s ease;}
.hero-dots{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; gap:9px; z-index:3; pointer-events:auto;}
.hero-dots button{width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer; transition:background .3s ease, transform .3s ease;}
.hero-dots button.on{background:#fff; transform:scale(1.3);}

/* ---- Entrance motion on banners */
@keyframes cms-up{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
.hero-card{animation:cms-up .9s cubic-bezier(.2,.7,.2,1) both;}
.pagehero .wrap > *{animation:cms-up .8s cubic-bezier(.2,.7,.2,1) both;}
.pagehero .wrap > *:nth-child(2){animation-delay:.07s;}
.pagehero .wrap > *:nth-child(3){animation-delay:.14s;}
.pagehero .wrap > *:nth-child(4){animation-delay:.21s;}

/* ---- Scroll reveal (classes are added by site.js only to content below the fold) */
.rv{opacity:0; transform:translateY(26px); transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rv-d, 0s);}
.rv.in{opacity:1; transform:none;}

/* ---- Gentle hover polish */
.btn, .cta-btn, nav > a, .drop > a, .foot-col a, .drop-menu a, .crumb a{transition:background-color .25s ease, color .25s ease, border-color .25s ease;}
.vcard, .qcard, .icard, .pcard, .ops-card, .ehs-card, .card, .box, .trust-item{transition:transform .35s ease, box-shadow .35s ease;}
.vcard:hover, .qcard:hover, .icard:hover, .pcard:hover, .ops-card:hover, .ehs-card:hover, .card:hover, .box:hover, .trust-item:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,25,35,.08);}

/* ---- Gallery video (shown once a video is uploaded in the admin panel) */
.cms-video{margin-bottom:30px; border-radius:8px; overflow:hidden; background:#0b1117;}
.cms-video video{display:block; width:100%; max-height:72vh;}

/* ---- Forms */
.file-drop.drag{border-color:var(--red) !important; background:#fff5f4 !important;}
.cms-msg{margin-top:14px; font-size:14px; font-weight:600; color:#1d7a46;}
.cms-msg.err{color:var(--red);}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1 !important; transform:none !important; transition:none !important;}
  .hero-card, .pagehero .wrap > *{animation:none !important;}
  .hero-slide{transition:none;}
  .vcard:hover, .qcard:hover, .icard:hover, .pcard:hover, .ops-card:hover, .ehs-card:hover, .card:hover, .box:hover, .trust-item:hover{transform:none;}
}

/* ---- Rotating tube inside each page's top banner */
.pagehero{position:relative;}
.ph-tube{position:absolute; top:50%; right:calc(max(0px, (100% - 1240px) / 2) + 32px); width:230px; height:230px; margin-top:-115px; pointer-events:none; animation:cms-fade 1s ease both;}
.ph-tube img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 18px 26px rgba(0,0,0,.35)); animation:ph-spin 16s linear infinite;}
@keyframes ph-spin{to{transform:rotate(360deg);}}
@keyframes cms-fade{from{opacity:0;} to{opacity:1;}}
@media (max-width:1180px){ .ph-tube{display:none;} }
@media (prefers-reduced-motion: reduce){ .ph-tube img{animation:none;} .ph-tube{animation:none;} }