/* ALASCOM Interactive Edition | premium B2B, 3D experiences */
:root{--fx-orange:#f4671a;--fx-navy:#0e2639}
.scroll-indicator{position:fixed;left:0;right:0;top:0;z-index:110;height:3px;pointer-events:none;background:transparent}.scroll-indicator span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#f4671a,#ffa363);box-shadow:0 0 14px rgba(244,103,26,.50)}
.hero{isolation:isolate}.hero-particles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.hero-particles i{position:absolute;top:0;left:0;width:2px;height:2px;border-radius:50%;background:#ff9345;box-shadow:0 0 22px 5px rgba(255,122,42,.6);opacity:0;animation:spark-float 12s linear infinite}.hero-particles i:nth-child(1){left:48%;animation-delay:0s}.hero-particles i:nth-child(2){left:67%;animation-delay:3s}.hero-particles i:nth-child(3){left:83%;animation-delay:6s}.hero-particles i:nth-child(4){left:35%;animation-delay:1.7s}.hero-particles i:nth-child(5){left:93%;animation-delay:8s}.hero-particles i:nth-child(6){left:58%;animation-delay:10s}
@keyframes spark-float{0%{top:110%;opacity:0;transform:translateX(0) scale(.6)}12%,80%{opacity:.7}100%{top:-10%;opacity:0;transform:translateX(42px) scale(1.6)}}
.hero-content{animation:hero-reveal .85s cubic-bezier(.2,.75,.28,1) both}.hero-content h1{animation:hero-reveal .9s .14s cubic-bezier(.2,.75,.28,1) both}.hero-content p{animation:hero-reveal .9s .22s cubic-bezier(.2,.75,.28,1) both}.hero-cta{animation:hero-reveal .9s .35s both}
@keyframes hero-reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-side-deco{position:absolute;right:22px;top:48%;z-index:1;writing-mode:vertical-rl;transform:translateY(-50%);color:rgba(255,255,255,.52);font-size:9px;letter-spacing:.27em;font-weight:800;pointer-events:none}
.btn-primary{position:relative;overflow:hidden}.btn-primary:after{content:"";pointer-events:none;position:absolute;left:-120%;top:-120%;height:340%;width:60%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.23),transparent);transition:left .7s}.btn-primary:hover:after{left:170%}
/* scroll reveals, only enabled with JS & motion permitted */
.js-motion .reveal-target{opacity:0;transform:translateY(28px);filter:blur(4px);transition:opacity .8s ease,transform .8s cubic-bezier(.18,.65,.23,1),filter .8s ease}
.js-motion .reveal-target.is-visible{opacity:1;transform:translateY(0);filter:none}
/* Interactive cards */
.interactive-card{transform-style:preserve-3d;will-change:transform;--rx:0deg;--ry:0deg;--lift:0px;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));transition:transform .27s ease,box-shadow .3s ease}
.interactive-card:hover{--lift:-8px;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));box-shadow:0 25px 48px rgba(12,37,57,.17)}
.interactive-card .service-image img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}.interactive-card:hover .service-image img{transform:scale(1.06)}
.interactive-card .product-image .tank-render{transition:transform .45s}.interactive-card:hover .product-image .tank-render{transform:scale(1.06)}
.preview-3d-link{color:#183b51;display:inline-flex;gap:7px;align-items:center;font-weight:800;font-size:12px;background:#edf5f8;border:1px solid #d9e5ea;border-radius:8px;padding:9px 12px;margin:0 0 11px;transition:background .2s,color .2s,transform .2s}.preview-3d-link:hover{background:var(--orange);color:white;transform:translateY(-2px)}
/* animated transport visualization */
.route-3d{background:linear-gradient(115deg,#092336,#143d51);color:#fff;padding:90px 0;position:relative;overflow:hidden}
.route-3d:before,.studio-3d:before{content:"";position:absolute;pointer-events:none;inset:-250px auto auto -200px;width:670px;height:670px;background:radial-gradient(circle,rgba(235,100,27,.11),transparent 65%)}
.route-layout{display:grid;grid-template-columns:.87fr 1.13fr;align-items:center;gap:58px;position:relative}
.route-copy h2,.studio-info h2{font-size:clamp(32px,3.45vw,50px);line-height:1.12;max-width:500px;letter-spacing:-.055em;margin:0 0 21px;color:#fff}
.route-copy h2 em,.studio-info h2 em{display:block;color:#ff873e}
.route-copy p,.studio-info>p{max-width:500px;line-height:1.85;color:#cad7e0;font-size:14px;margin:0 0 30px}
.route-steps{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 24px}.route-steps>span:not(.route-line){font-size:11px;font-weight:800;color:#ebf3f7;white-space:nowrap}.route-steps b{color:#ff8b49;font-size:10px;margin-right:5px}.route-line{height:1px;width:20px;background:rgba(255,255,255,.32);flex:none}
.scene-buttons{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.scene-btn{border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.11);border-radius:8px;color:#fff;padding:10px 14px;font-size:11px;font-weight:800;line-height:1.1;transition:background .2s,transform .2s}.scene-btn:hover{background:rgba(255,255,255,.21);transform:translateY(-2px)}.scene-btn-secondary{background:transparent;border-color:rgba(255,255,255,.19);color:#d8e3e9}
.illustrative-note{display:block;color:#9eb1bc;line-height:1.65;font-size:10px;max-width:480px;margin-top:21px}
.route-view-wrap{position:relative;overflow:hidden;border:1px solid rgba(173,218,232,.20);border-radius:22px;background:#102e43;box-shadow:0 29px 65px rgba(0,0,0,.28)}
.route-corner-label{position:absolute;right:20px;top:17px;z-index:4;background:rgba(0,11,22,.4);border-radius:100px;padding:7px 10px;display:flex;align-items:center;gap:9px;font-size:9px;font-weight:900;letter-spacing:.13em;color:#cddfe9}
.live-ring{display:inline-block;width:8px;height:8px;background:#ff7b2f;border-radius:50%;box-shadow:0 0 0 5px rgba(255,120,38,.16);animation:live-pulse 2.1s ease-in-out infinite;flex:none}
@keyframes live-pulse{50%{box-shadow:0 0 0 10px rgba(255,120,38,.01)}}
.model3d-host{position:relative;min-width:0;isolation:isolate;overflow:hidden;background:linear-gradient(140deg,#123d51,#071d2d)}
.model3d-host .model-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;font-size:13px;color:#cbd8dd}
.model3d-host:has(canvas) .model-fallback{display:none}
.interactive-3d-canvas{position:absolute;inset:0;display:block;max-width:100%;cursor:grab;touch-action:pan-y;outline-offset:-5px}.model3d-host.is-dragging .interactive-3d-canvas{cursor:grabbing}
.route-model{height:390px}.route-view-bottom{display:flex;justify-content:space-between;padding:12px 20px 16px;border-top:1px solid rgba(255,255,255,.12);font-size:9px;font-weight:900;letter-spacing:.14em;color:#a1bece}.route-view-bottom span{color:#ff9250}
/* premium interactive 3D product studio */
.studio-3d{position:relative;overflow:hidden;background:radial-gradient(circle at 83% 30%,#1b4960 0%,#102d41 38%,#081f30 77%);color:#fff;padding:105px 0}
.studio-3d:before{left:auto;right:-240px;top:-200px}
.studio-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center;position:relative}
.studio-mini-label{display:block;font-size:10px;color:#a6bdcb;letter-spacing:.15em;font-weight:900;margin:4px 0 14px}
.capacity-selector{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:410px;margin:0 0 18px}
.capacity-selector button{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:13px 5px;color:#ebf5fa;font-weight:900;font-size:13px;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.capacity-selector button:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}.capacity-selector button.active{background:#f4671a;border-color:#f4671a;box-shadow:0 10px 25px rgba(244,103,26,.27);color:#fff}
.studio-selection{display:flex;align-items:center;gap:17px;margin-bottom:19px}.studio-selection span{font-size:10px;letter-spacing:.12em;color:#b5cad5;font-weight:800}.studio-selection strong{font-size:25px;line-height:1;color:white}
.studio-actions{display:flex;gap:20px;flex-wrap:wrap;align-items:center}.studio-actions .btn{white-space:normal}.studio-secondary-link{color:#e5f2f7;font-size:12px;font-weight:800;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:3px}
.studio-view{border:1px solid rgba(191,221,232,.20);background:#103244;border-radius:22px;overflow:hidden;box-shadow:0 32px 70px rgba(0,0,0,.35)}
.studio-view-top{display:flex;justify-content:space-between;align-items:center;padding:16px 19px;background:rgba(4,20,31,.45);border-bottom:1px solid rgba(255,255,255,.10);font-size:10px;letter-spacing:.13em;font-weight:800;color:#c7d8e2}
.studio-view-top span:first-child{display:flex;align-items:center;gap:12px}.studio-view-top>span:last-child{color:#ff9c59}
.tank-model{height:445px}
.studio-view-controls{display:flex;justify-content:space-between;align-items:center;gap:13px;flex-wrap:wrap;padding:14px 19px 16px;border-top:1px solid rgba(255,255,255,.12);background:rgba(8,29,43,.9)}
.drag-instruction{font-size:11px;color:#d3e0e7}.drag-instruction span{font-size:19px;vertical-align:middle;color:#ff8844;margin-right:6px}
/* Separate product detail pages get 3D viewer too */
.detail-3d-wrap{display:block!important;overflow:hidden;min-height:0!important;border-radius:19px;background:#0b283b!important;position:relative}
.detail-3d-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;background:#0b283b;color:#e6f2f9;font-size:9px;letter-spacing:.12em;font-weight:900}
.detail-3d-head span:first-child{display:flex;align-items:center;gap:10px}.detail-3d-head span:last-child{color:#ffc39d}
.detail-model{height:360px}.detail-3d-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:15px;background:#0b283b;color:#a9bcc8;font-size:10px;border-top:1px solid rgba(255,255,255,.13)}
.detail-3d-controls .scene-btn{font-size:10px;padding:8px 10px}
/* sticky nav elevation on scroll */
.site-header{transition:box-shadow .3s,background .3s}.site-header.scrolled{box-shadow:0 10px 35px rgba(3,27,43,.13);background:rgba(255,255,255,.97);backdrop-filter:blur(18px)}
/* lighter touch animation for gallery */
.gallery-preview-grid>a,.industry-card{transition:box-shadow .3s,transform .3s}.gallery-preview-grid>a:hover,.industry-card:hover{transform:translateY(-6px);box-shadow:0 20px 42px rgba(0,0,0,.22)}
@media(max-width:1050px){.route-layout,.studio-layout{grid-template-columns:1fr;gap:34px}.route-3d,.studio-3d{padding:76px 0}.route-copy p,.studio-info>p{max-width:730px}.studio-info h2,.route-copy h2{max-width:750px}.capacity-selector{max-width:550px;grid-template-columns:repeat(5,minmax(0,1fr))}.tank-model{height:440px}}
@media(max-width:690px){.hero-side-deco{display:none}.route-3d,.studio-3d{padding:60px 0}.route-layout,.studio-layout{gap:26px}.route-copy h2,.studio-info h2{font-size:36px}.route-model{height:280px}.tank-model{height:295px}.capacity-selector{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.capacity-selector button{font-size:11px;padding:10px 4px}.studio-view-top{font-size:8px;padding:14px 13px}.studio-view-controls{padding:14px}.route-view-bottom span{display:none}.studio-actions{align-items:stretch;gap:14px}.studio-actions .btn{width:100%}.route-steps{gap:6px}.route-steps span:not(.route-line){font-size:10px}.route-line{width:9px}.scene-btn{font-size:10px;padding:9px 11px}.detail-model{height:280px}.detail-3d-head{font-size:8px}.detail-3d-head span:last-child{display:none}.detail-3d-controls{justify-content:start}.interactive-card{will-change:auto}}
@media(prefers-reduced-motion:reduce){.scroll-indicator span,.live-ring,.hero-particles i,.hero-content,.hero-content h1,.hero-content p,.hero-cta{animation:none!important}.js-motion .reveal-target{opacity:1;transform:none;filter:none}.interactive-card,.interactive-card:hover{transform:none!important}.btn-primary:after{display:none}}