/* GRAPNER SA — V3 / animation cinématique bleu acier */
:root{--v3-ease:cubic-bezier(.22,1,.36,1);--v3-ink:#b8d6e8}
html{scroll-behavior:smooth}
body{overflow-x:clip}
.hero{isolation:isolate}
.hero-image{will-change:transform}
.hero-image img{animation:v3-photo-breathe 28s ease-in-out infinite alternate!important}
.hero-image::before{content:"";position:absolute;inset:-12% -22%;pointer-events:none;z-index:3;opacity:.18;background:linear-gradient(110deg,transparent 35%,rgba(178,220,250,.11) 46%,rgba(238,246,255,.32) 49%,transparent 53%);transform:translateX(-75%);animation:v3-cinema-light 12s ease-in-out infinite}
.hero-image::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.42;mix-blend-mode:screen;background:radial-gradient(circle 16vw at var(--v3-cursor-x,72%) var(--v3-cursor-y,42%),rgba(177,203,231,.2),transparent 85%);transition:opacity .5s ease}
.hero-grid{animation:v3-grid-drift 22s linear infinite}
.hero h1 .intro{animation-duration:1.15s}
.hero h1 em{display:inline-block;background:linear-gradient(103deg,#d5e7f3 0%,#93bad7 36%,#ecf6ff 51%,#90b7d6 73%,#bed7e9 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:v3-headline-shine 9s ease-in-out 1.9s infinite}
.hero-eyebrow .pulse{animation:v3-signal-pulse 3.3s ease-out infinite}
.hero-coordinate .coordinate-line{overflow:hidden}
.hero-coordinate .coordinate-line::after{content:"";position:absolute;top:0;left:-100%;width:36%;height:1px;background:#d6ecff;opacity:.74;animation:v3-coordinate 7s ease-in-out infinite}
#sparks{filter:drop-shadow(0 0 2.6px rgba(255,198,118,.42))}
.hero-ctas .button svg,.nav-actions .button svg{transition:transform .5s var(--v3-ease)}
.hero-ctas .button:hover svg,.nav-actions .button:hover svg{transform:translate(2px,-2px)}
.round-link .round{transition:transform .52s var(--v3-ease),border-color .35s,background .35s}
.round-link:hover .round{transform:translateY(4px);background:#9bbfd63b;border-color:#b1d1e4}
.wordmark{transition:letter-spacing .55s var(--v3-ease)}
.wordmark:hover{letter-spacing:.065em}
.section-index .section-rule{position:relative;overflow:hidden}
.section-index .section-rule::after{content:"";position:absolute;left:-110%;top:0;height:100%;width:80%;background:#a8cce5;opacity:.7;animation:v3-rule-scan 7s ease-in-out infinite}
.tiny{transition:color .35s ease}
.v3-ready .v3-enter{opacity:0;transform:translate3d(0,23px,0);transition:opacity .86s ease,transform 1s var(--v3-ease);transition-delay:var(--v3-delay,0ms)}
.v3-ready .v3-enter.v3-shown{opacity:1;transform:translate3d(0,0,0)}
.capability-row a{overflow:hidden;position:relative}
.capability-row a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#8baecd;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--v3-ease)}
.capability-row a:hover::after{transform:scaleX(1)}
.capability-row a span{display:inline-block;transition:transform .5s var(--v3-ease),color .3s ease}
.capability-row a:hover span{transform:translate(3px,-3px);color:#cbe5f6}
.service-card{--v3-tilt-x:0deg;--v3-tilt-y:0deg;--v3-hover-elevation:-6px;transform-style:preserve-3d}
.service-card.reveal.waiting.seen:hover,.service-card.reveal:not(.waiting):hover{transform:perspective(1200px) translate3d(0,var(--v3-hover-elevation),0) rotateX(var(--v3-tilt-x)) rotateY(var(--v3-tilt-y));box-shadow:0 25px 55px rgba(3,13,24,.22)}
.service-card .service-icon{transition:transform .65s var(--v3-ease),color .35s ease}
.service-card:hover .service-icon{transform:rotate(-8deg) scale(1.09);color:#c1dcf0}
.service-card .service-copy strong{transition:color .34s ease}
.service-card:hover .service-copy strong{color:#d6eafa}
.service-card.photographic>img{transition:transform 1.3s var(--v3-ease),filter .7s ease}
.service-card.photographic:hover>img{transform:scale(1.075);filter:saturate(.74) brightness(1.12)}
.service-card .card-arrow{transition:transform .55s var(--v3-ease),background .4s,border-color .4s}
.service-card.reveal.waiting.seen:hover .card-arrow,.service-card.reveal:not(.waiting):hover .card-arrow{transform:rotate(45deg) scale(1.045)}
.material-tabs [data-material]{position:relative;transition:color .45s,background .45s,padding-left .5s var(--v3-ease)}
.material-tabs [data-material]:hover{padding-left:12px}
.material-tabs [data-material][aria-selected="true"]{color:#d7eafb}
.material-display{transition:background 1s ease,border-color .5s ease,box-shadow .6s ease}
.material-display[data-finish="acier"]{background:radial-gradient(ellipse at 66% 34%,#3a5168 -10%,#233544 38%,#121e29 77%)}
.material-display[data-finish="usure"]{background:radial-gradient(ellipse at 65% 32%,#535e69 -10%,#313c49 40%,#151d26 78%)}
.material-display[data-finish="inox"]{background:radial-gradient(ellipse at 66% 32%,#6a8490 -10%,#2b4857 40%,#142a35 80%)}
.material-display[data-finish="aluminium"]{background:radial-gradient(ellipse at 65% 30%,#6f8693 -10%,#334b61 40%,#162a38 80%)}
.material-display:hover{box-shadow:0 18px 55px #030d1840}
.metal-object{transition:transform 1s var(--v3-ease)}
.material-display:hover .metal-object{transform:translateY(-5px)}
.value-grid>div{transition:transform .65s var(--v3-ease),border-color .35s}
.value-grid>div:hover{transform:translateY(-5px)}
.value-grid>div .tiny{display:inline-block;transition:transform .55s var(--v3-ease)}
.value-grid>div:hover .tiny{transform:translateX(3px);color:var(--v3-ink)}
.company .text-link svg,.contact .text-link svg{transition:transform .55s var(--v3-ease)}
.company .text-link:hover svg,.contact .text-link:hover svg{transform:translate(4px,-4px)}
.faq-section details{transition:background .38s ease,border-color .38s ease}
.faq-section details:hover{background:rgba(173,207,235,.035)}
.faq-section details summary{transition:color .3s ease,padding-left .5s var(--v3-ease)}
.faq-section details summary:hover{color:#d3eaff;padding-left:5px}
.faq-section details summary span{display:inline-block;transition:transform .55s var(--v3-ease),color .35s ease}
.faq-section details[open] summary span{transform:rotate(45deg);color:#aacde6}
.faq-section details[open] p{animation:v3-accordion .49s var(--v3-ease) both}
.form-step:not([hidden]){animation:v3-step .52s var(--v3-ease) both}
.step-indicator{transition:color .35s,border-color .45s,background .45s,transform .46s var(--v3-ease)}
.step-indicator.active{transform:translateY(-2px)}
.quote-form input,.quote-form textarea,.quote-form select{transition:border-color .3s ease,box-shadow .3s ease,background .35s ease}
.quote-form input:focus,.quote-form textarea:focus,.quote-form select:focus{box-shadow:0 0 0 3px rgba(124,178,218,.10)}
.button,.circle-button{position:relative;overflow:hidden}
.v3-ripple{position:absolute;z-index:1;border-radius:50%;background:rgba(246,250,255,.28);pointer-events:none;width:14px;height:14px;left:0;top:0;transform:translate(-50%,-50%) scale(0);animation:v3-ripple .65s ease-out both}
.menu-dialog nav>a{animation:none}
.menu-dialog[open] nav>a{animation:v3-menu-item .56s var(--v3-ease) both;animation-delay:calc(var(--v3-nav-index,0) * 57ms + 110ms)}
.menu-dialog[open] .menu-dialog-header{animation:v3-menu-item .48s var(--v3-ease) both}
.menu-dialog[open] .menu-foot{animation:v3-menu-item .7s var(--v3-ease) .28s both}
.menu-dialog nav>a:hover{padding-left:6px}
.header.is-scrolled .reading-progress{filter:drop-shadow(0 0 3px rgba(153,200,234,.5))}
.footer-wordmark{transition:opacity .7s ease,letter-spacing .8s var(--v3-ease)}
.footer-wordmark:hover{letter-spacing:.017em}
.back-top{transition:transform .55s var(--v3-ease),background .3s ease}
.back-top:hover{transform:translateY(-4px)}
@keyframes v3-photo-breathe{0%{transform:scale(1.005) translate3d(0,0,0)}100%{transform:scale(1.059) translate3d(-.65%,.4%,0)}}
@keyframes v3-grid-drift{0%{background-position:0 0}100%{background-position:60px 0}}
@keyframes v3-cinema-light{0%,26%{transform:translateX(-78%);opacity:0}43%{opacity:.23}65%,100%{transform:translateX(82%);opacity:0}}
@keyframes v3-headline-shine{0%,19%,100%{background-position:95% 0}55%,68%{background-position:0 0}}
@keyframes v3-signal-pulse{0%,100%{box-shadow:0 0 0 0 rgba(170,213,236,.36)}44%{box-shadow:0 0 0 7px rgba(170,213,236,0)}}
@keyframes v3-coordinate{0%,28%{left:-100%}66%,100%{left:125%}}
@keyframes v3-rule-scan{0%,35%{left:-110%}72%,100%{left:140%}}
@keyframes v3-accordion{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes v3-step{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
@keyframes v3-menu-item{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
@keyframes v3-ripple{to{transform:translate(-50%,-50%) scale(22);opacity:0}}
@media(max-width:760px){
 .hero-image img{animation-duration:34s!important}
 .hero-image::before{opacity:.13}
 .hero-image::after{opacity:.2}
 .v3-ready .v3-enter{transform:translate3d(0,13px,0);transition-duration:.72s}
 .service-card.reveal.waiting.seen:hover,.service-card.reveal:not(.waiting):hover{transform:none;box-shadow:none}
 .material-tabs [data-material]:hover{padding-left:0}
 .faq-section details summary:hover{padding-left:0}
 .menu-dialog[open] nav>a{animation-duration:.48s;animation-delay:calc(var(--v3-nav-index,0) * 43ms + 65ms)}
}
.motion-paused .v3-enter,.motion-paused .v3-enter:not(.v3-shown){opacity:1!important;transform:none!important}
.motion-paused .hero-image::after{opacity:.16}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .hero-image img,.hero-image::before,.hero-grid,.hero h1 em,.hero-eyebrow .pulse,.hero-coordinate .coordinate-line::after,.section-index .section-rule::after{animation:none!important}
 .hero h1 em{background:none!important;color:#bed7e9!important;-webkit-text-fill-color:#bed7e9!important}
 .v3-ready .v3-enter,.v3-ready .v3-enter:not(.v3-shown){opacity:1!important;transform:none!important;transition:none!important}
 .menu-dialog[open] nav>a,.menu-dialog[open] .menu-dialog-header,.menu-dialog[open] .menu-foot,.faq-section details[open] p,.form-step:not([hidden]){animation:none!important}
 .service-card,.service-card:hover,.value-grid>div:hover,.material-display:hover .metal-object{transform:none!important}
 .v3-ripple{display:none}
}
@media print{.v3-ready .v3-enter{opacity:1!important;transform:none!important} .hero-image::before,.hero-image::after{display:none!important}}