/* IRON CONSTRUCTION V5 — cinematic illustrative motion system.
   Decorative photography is AI-generated CONCEPT ART, not company projects.
   Uses transform/opacity animations and supports reduced-motion. */
:root{--cinema-electric:#44b9ff;--cinema-navy:#071a35}
/* Hero: immersive concept-art with a carefully preserved dark reading zone. */
.hero-slider{background:#051932}
.hero-panel.hero-concept-photo{background:#061e42}
.hero-concept-photo .hero-panel-art{inset:0;width:100%;height:100%;opacity:1;transform:translate3d(var(--parallax-x,0px),var(--parallax-y,0px),0);will-change:transform}
.hero-concept-photo .hero-panel-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;max-width:none;filter:none;transform:scale(1.04);will-change:transform}
.hero-concept-photo .hero-panel-art::before{inset:0;background:linear-gradient(90deg,#041830f9 0%,#052453eb 32%,#082f66b5 53%,#061a3466 78%,#04172d4a 100%);z-index:2}
.hero-concept-photo .hero-panel-art::after{content:"";position:absolute;inset:-20% 0;background:linear-gradient(112deg,transparent 38%,#8adfff09 50%,transparent 62%);transform:translateX(-75%);z-index:2;pointer-events:none;animation:iron-light-sweep 10s ease-in-out infinite}
.hero-concept-photo .hero-grid{opacity:.42}
.hero-panel .hero-decor-orbit{position:absolute;z-index:1;right:4%;top:14%;width:34vw;max-width:440px;aspect-ratio:1;border:1px solid #9ad7ff29;border-radius:50%;box-shadow:0 0 0 62px #8bd5ff0a,0 0 0 120px #8bd5ff05;pointer-events:none;animation:orbit-soft 18s linear infinite}
.hero-panel .hero-decor-orbit::after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;background:#64e5ff;box-shadow:0 0 16px #42d4ff;border-radius:50%}
.hero-concept-photo.swiper-slide-active .hero-panel-art img,.hero-concept-photo:first-child:not(.swiper-slide-prev):not(.swiper-slide-next) .hero-panel-art img{animation:iron-ken-burns 8.5s ease-out both}
.hero-panel .hero-content{position:relative}
.hero-panel .hero-content::before{content:"";position:absolute;inset:-25px -40px -25px -18px;border-left:2px solid #62ceff59;opacity:.4;pointer-events:none}
.hero-panel .hero-buttons .btn{box-shadow:0 16px 35px #000a1c30;transition:transform .25s,box-shadow .25s,background-color .25s}
.hero-panel .hero-buttons .btn:hover{transform:translateY(-4px);box-shadow:0 20px 35px #000a1c63}
.hero-panel .hero-image-disclaimer{font-size:12px;max-width:370px;padding:9px 13px;background:#011a38db}
.hero-concept-photo .eyebrow-line{box-shadow:0 0 16px #2bc7ff75}
@keyframes iron-ken-burns{from{transform:scale(1.045)}to{transform:scale(1.13)}}
@keyframes iron-light-sweep{0%,30%{transform:translateX(-130%)}65%,100%{transform:translateX(135%)}}
@keyframes orbit-soft{to{transform:rotate(360deg)}}
/* Engineering-company editorial visual. */
.identity-visual{background:#0b3568}
.identity-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;max-width:none;filter:none;transform:scale(1.02);animation:identity-breathe 15s ease-in-out infinite alternate}
.identity-visual::before{z-index:1;background-image:linear-gradient(#b6eaff20 1px,transparent 1px),linear-gradient(90deg,#b6eaff20 1px,transparent 1px);background-size:62px 62px;mask-image:linear-gradient(90deg,#000,transparent 90%)}
.identity-visual::after{z-index:1}
.identity-visual::before,.identity-drawing-header,.identity-visual-bottom{pointer-events:none}
.identity-drawing-header,.identity-visual-bottom{z-index:3;text-shadow:0 2px 9px #001b41}
.identity-visual .identity-image-glow{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#041a3fa6,transparent 32%,#00192b35);pointer-events:none}
@keyframes identity-breathe{from{transform:scale(1.02)}to{transform:scale(1.13)}}
/* Photographic service headers: designed as conceptual category art, not work samples. */
.service-grid{gap:23px}
.service-card{padding:0 34px 34px;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.service-card::before{z-index:3}
.service-photo{margin:0 -34px 25px;position:relative;height:192px;overflow:hidden;background:#0c315e}
.service-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#071e3c76,transparent 62%);pointer-events:none}
.service-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.1,1),filter .5s;filter:saturate(.88) contrast(1.09)}
.service-photo span{position:absolute;left:16px;bottom:13px;z-index:2;font-size:12px;font-weight:700;letter-spacing:.04em;background:#092b57d6;color:#e1f5ff;padding:7px 11px;border-left:2px solid #67d1ff}
.service-card:hover .service-photo img{transform:scale(1.12);filter:saturate(1.06) contrast(1.1)}
.service-card:hover{box-shadow:0 25px 50px #1745781c;border-color:#70acdd}
.service-top{position:relative;z-index:2}
.service-card .service-symbol{margin:16px 0 14px;font-size:40px}
.service-card h3{font-size:26px}
.service-card p{font-size:17px;line-height:1.88}
/* Structural info/steps, refined micro-interactions */
.premium-workflow{background:linear-gradient(90deg,#ffffffef,#fffffff2),url('/assets/cinematic/blueprint-detail.webp') center/cover}
.workflow-step{transition:transform .32s,box-shadow .32s,border-color .32s}
.workflow-step:hover{transform:translateY(-8px);box-shadow:0 23px 45px #0a396d1f}
.workflow-symbol{transition:transform .35s,box-shadow .35s}
.workflow-step:hover .workflow-symbol{transform:rotate(-5deg) scale(1.07);box-shadow:0 9px 20px #0e70e222}
/* Concept-art portfolio preview retains explicit not-a-project messaging. */
.empty-art{background:linear-gradient(135deg,#08234bc2,#2466a494),url('/assets/cinematic/blueprint-detail.webp') center/cover}
.empty-art>span{z-index:3;left:20px;right:20px;color:#dcefff;font-size:15px;letter-spacing:.04em;background:#061f45d6;padding:11px 15px;border-left:3px solid #68d6ff;max-width:95%}
.empty-art .blueprint-line{border-color:#80dcff75;box-shadow:0 0 0 55px #ffffff0b,0 0 0 95px #8adfff12;animation:orbit-soft 24s linear infinite}
.empty-art img{filter:drop-shadow(0 12px 23px #021735ab);transition:transform .6s}
.empty-gallery:hover .empty-art img{transform:scale(1.055)}
/* About/services/projects/contact banners enrich separate pages without reducing contrast. */
.page-hero{position:relative;isolation:isolate;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(90deg,#071b39ed 0%,#082c5dd4 52%,#082a579e 100%),url('/assets/cinematic/hero-building.webp');background-size:cover;background-position:center;animation:page-pan 24s ease-in-out infinite alternate}
body.route-about .page-hero::before{background-image:linear-gradient(90deg,#071b39ed,#082c5dd2 60%,#082c5d78),url('/assets/cinematic/company-vision.webp')}
body.route-services .page-hero::before{background-image:linear-gradient(90deg,#071b39e5,#082c5dd0 64%,#082c5d90),url('/assets/cinematic/hero-structure.webp')}
body.route-projects .page-hero::before{background-image:linear-gradient(90deg,#071b39ed,#082c5dcc 60%,#082c5d80),url('/assets/cinematic/hero-building.webp')}
body.route-contact .page-hero::before{background-image:linear-gradient(90deg,#071b39ed,#082c5dd4 64%,#082c5d81),url('/assets/cinematic/hero-foundation.webp')}
@keyframes page-pan{to{transform:scale(1.1) translateX(-1.5%)}}
/* CTA: visual depth with a safe background gradient. */
.cta-section{position:relative;isolation:isolate;background:#073269}
.cta-section::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,#041936ee 0%,#0a3d8bdc 58%,#114ba79c),url('/assets/cinematic/hero-structure.webp') center/cover;animation:page-pan 25s ease-in-out infinite alternate}
.cta-rings{opacity:.6;animation:orbit-soft 45s linear infinite}
/* Reveal on scroll: activated only after JS initialises an observer. */
.motion-ready [data-reveal]:not(.is-visible){opacity:0;transform:translateY(32px)}
.motion-ready [data-reveal]{transition:opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal].is-visible{opacity:1;transform:translateY(0)}
/* Mobile layout: image readable and load-light */
@media(max-width:900px){
 .hero-concept-photo .hero-panel-art::before{background:linear-gradient(180deg,#061b38e8,#072451db 48%,#0a3b7680 78%,#03142bd9 100%)}
 .hero-panel .hero-decor-orbit{width:70vw;right:-24%;top:36%;opacity:.3}
 .hero-panel .hero-content::before{display:none}
 .identity-visual img{object-position:center 40%}
 .service-card{padding:0 24px 25px}
 .service-photo{margin:0 -24px 24px;height:174px}
 .service-photo span{font-size:11px}
}
@media(max-width:700px){
 .hero-concept-photo .hero-panel-art{right:0;bottom:0;top:0;width:100%;height:100%;opacity:1}
 .hero-concept-photo .hero-panel-art img{width:100%;height:100%;object-fit:cover;object-position:64% center;transform:scale(1.02)}
 .hero-concept-photo .hero-panel-art::before{background:linear-gradient(180deg,#041832f2 0%,#05204af0 35%,#082f66c9 64%,#041a3be3 100%)}
 .hero-panel .hero-image-disclaimer{font-size:11px;left:12px;right:12px;width:max-content;max-width:calc(100% - 24px)}
 .hero-panel .hero-content>p{font-size:17px;line-height:1.8}
 .service-photo{height:188px}
 .identity-visual img{height:100%;width:100%;object-fit:cover}
 .empty-art>span{font-size:13px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){
 .hero-concept-photo .hero-panel-art img,.hero-concept-photo .hero-panel-art::after,.hero-panel .hero-decor-orbit,.identity-visual img,.empty-art .blueprint-line,.page-hero::before,.cta-section::before,.cta-rings{animation:none!important;transform:none!important}
 .motion-ready [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
 .service-photo img,.workflow-step,.service-card{transition:none!important}
}