/* JULFIKAR STEEL — Scroll Cinema V2.
   Only CSS + Vanilla JS. Restores scroll-pinned, stacked/overlapping card zoom,
   reversible with wheel/touch scroll. No Next.js bundles or remote packages. */
:root{--cinema-top:106px;--cinema-orange:#f7941e}
/* The original site's hero gets smaller/rounder as the visitor scrolls. */
/* HOME3: full-bleed outer scenes; keep ONLY the internal copy constrained. */
.hero-section.container{width:100%;max-width:none;margin-inline:0;padding-inline:0;padding-top:0}
.hero-section .hero-screen{width:100%;border-radius:0}
.hero-section{height:171svh;min-height:940px;position:relative}
.hero-section .hero-screen{position:sticky;top:var(--cinema-top);height:min(690px,calc(100svh - 123px));min-height:460px;transform-origin:center top;will-change:transform,border-radius;transition:none;box-shadow:0 18px 75px rgba(20,22,25,.04)}
.hero-section .hero-content{will-change:transform,opacity}
/* Scroll-story viewport: one scene replaces/overlaps another like wrapped layers. */
.cinema{height:465svh;min-height:2800px;position:relative;isolation:isolate;background:#fff}
.cinema-stick{position:sticky;top:var(--cinema-top);height:calc(100svh - var(--cinema-top) - 10px);min-height:480px;max-height:900px;overflow:visible;width:100%;max-width:none;margin-inline:0;padding:37px 0 38px}
.cinema-header,.cinema-meter{position:absolute;z-index:25;left:clamp(16px,3.3vw,64px);right:clamp(16px,3.3vw,64px);display:flex;align-items:center;justify-content:space-between;gap:20px;color:#999;pointer-events:none}
.cinema-header{top:4px}.cinema-meter{bottom:2px}.cinema-kicker,.cinema-counter{font-size:10px;font-weight:800;letter-spacing:.17em}.cinema-kicker i{display:inline-block;height:7px;width:7px;border-radius:50%;background:var(--cinema-orange);margin-right:12px;box-shadow:0 0 0 4px #f7941e29}.cinema-counter{color:#37393c}
.cinema-meter{font-size:9px;font-weight:770;letter-spacing:.14em}.cinema-meter-line{height:2px;min-width:140px;flex:1;background:#ececec;overflow:hidden;display:block}.cinema-meter-line i{height:100%;display:block;width:0;background:var(--cinema-orange)}
.cinema-viewport{height:100%;position:relative;isolation:isolate;overflow:hidden;border-radius:0;background:#18191a;box-shadow:none;transform:translateZ(0)}
.cinema-panel{position:absolute;inset:0;border-radius:0;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;transform-origin:50% 50%;will-change:transform,opacity,filter;backface-visibility:hidden;opacity:0;pointer-events:none}
.cinema-panel-one{background:linear-gradient(136deg,#f9f9f7 12%,#ecefec 100%);color:#1e2326;opacity:1;pointer-events:auto}
.cinema-panel-two{background:linear-gradient(145deg,#15181b,#303338 84%);color:#f9fafa}
.cinema-panel-three{background:linear-gradient(138deg,#e77c0a 2%,#ffa12f 63%,#de7004 100%);color:#1c2024}
.cinema-panel-four{background:linear-gradient(127deg,#ffffff 4%,#eceeef 100%);color:#242629}
.cinema-panel-inner{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;width:min(1200px,calc(100% - 90px));height:100%;gap:20px;margin:auto}
.cinema-copy{position:relative;z-index:3;padding:30px 0 44px;transform:translateY(var(--cinema-text-y,0px));will-change:transform}
.cinema-num{font-size:11px;font-weight:850;letter-spacing:.16em;text-transform:uppercase;margin-bottom:32px;color:#a06b2b}
.cinema-panel-two .cinema-num{color:#f5a34c}.cinema-panel-three .cinema-num{color:#54320b}
.cinema-copy h2{font-size:clamp(51px,5.5vw,87px);line-height:1.02;letter-spacing:-.07em;font-weight:840;margin:0 0 29px}
.cinema-copy h2 em{font-style:normal;color:var(--cinema-orange)}
.cinema-panel-three .cinema-copy h2 em{color:white}
.cinema-copy p{font-size:clamp(13px,1.18vw,17px);line-height:1.76;max-width:425px;margin:0 0 38px;color:#676c71}
.cinema-panel-two .cinema-copy p{color:#bfc4ca}.cinema-panel-three .cinema-copy p{color:#442d16}
.cinema-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:27px;border:1px solid currentColor;border-radius:7px;padding:15px 19px;font-size:13px;font-weight:790;transition:background .3s,transform .3s,color .3s}
.cinema-cta:hover{background:var(--cinema-orange);border-color:var(--cinema-orange);color:#16191b;transform:translateY(-3px)}
.cinema-art{height:100%;width:100%;position:relative;display:grid;place-items:center;overflow:hidden}
.cinema-footer-note{font-size:10px;font-weight:780;letter-spacing:.15em;position:absolute;left:4%;bottom:27px;z-index:3;opacity:.55}
.cinema-footer-note b{font-size:16px;vertical-align:middle;margin-left:7px}
/* Real CSS steel detail; animated per active scene. */
.cinema-halo{position:absolute;width:82%;max-width:520px;aspect-ratio:1;border:1px solid #a9b0b444;border-radius:50%;background:radial-gradient(circle,#f7941e3a 0%,#f7941e0d 45%,transparent 72%)}
.cinema-halo::before,.cinema-halo::after{content:"";position:absolute;inset:14%;border:1px dashed #22222240;border-radius:50%;animation:cinema-orbit 33s linear infinite}
.cinema-halo::after{inset:29%;border-style:solid;animation-direction:reverse}
.cinema-rod{position:absolute;width:76%;height:clamp(36px,4.2vw,63px);border-radius:26px;background:repeating-linear-gradient(108deg,#0c111741 0 5px,transparent 6px 30px,#fafafa66 32px 34px,transparent 35px 51px),linear-gradient(180deg,#20272e 0%,#c4cdd2 16%,#4a5156 30%,#e8edf1 52%,#3b4248 73%,#12161b 96%);box-shadow:0 24px 29px #0004,inset 0 3px 5px #fff7;transform:rotate(-27deg) translateZ(0)}
.cinema-rod-a{top:36%;left:12%}.cinema-rod-b{top:50%;left:16%}.cinema-rod-c{top:64%;left:20%}
.cinema-active .cinema-rod{animation:cinema-rodfloat 4.3s ease-in-out infinite alternate}.cinema-active .cinema-rod-b{animation-delay:-1.3s}.cinema-active .cinema-rod-c{animation-delay:-2.6s}
.cinema-outline{font-weight:900;font-style:italic;font-size:clamp(80px,12vw,182px);letter-spacing:-.1em;color:#ffffff4a;position:absolute;right:6%;bottom:5%;user-select:none}
.cinema-floating-label{position:absolute;top:20%;right:3%;padding:16px 18px;background:#fff;border:1px solid #ebebeb;box-shadow:0 15px 36px #0001;border-radius:7px;font-weight:830;letter-spacing:.1em;font-size:10px;transform:rotate(5deg)}.cinema-floating-label b{margin-left:25px;color:var(--cinema-orange)}
/* Product scene uses the user's supplied XTRA brand product artwork. */
.cinema-art-420{isolation:isolate;background:radial-gradient(circle at 50% 52%,#f7941e1a,transparent 65%)}
.cinema-giant-number{position:absolute;font-size:clamp(155px,23vw,330px);letter-spacing:-.1em;font-weight:900;color:#ffffff0c;line-height:1;z-index:-1;transform:rotate(-9deg)}
.cinema-art-420 img{width:90%;height:56%;border-radius:16px;object-fit:cover;box-shadow:0 35px 85px #0009;transform:perspective(1100px) rotateY(-10deg) rotateX(5deg) rotate(-3deg);border:1px solid #ffffff22}
.cinema-grade-tag{position:absolute;z-index:3;right:6%;bottom:17%;font-size:12px;font-weight:700;letter-spacing:.12em;color:#e7eaeb;background:#212428e8;border:1px solid #f7941e44;padding:14px 22px;border-radius:7px;box-shadow:0 8px 28px #0006}
.cinema-grade-tag strong{font-size:20px;color:var(--cinema-orange);display:block;margin-top:6px;letter-spacing:0}
/* Vivid orange 500 grade, still using CSS rather than third-party graphics. */
.cinema-art-500{background:radial-gradient(circle,#fff3 0%,transparent 56%)}
.cinema-orbit{position:absolute;aspect-ratio:1;width:75%;border:1px solid #ffffff75;border-radius:50%;box-shadow:0 0 0 70px #ffffff0d,0 0 0 135px #ffffff09}
.cinema-art-500 .cinema-rod{box-shadow:0 17px 24px #75350069,inset 0 2px 4px #fff8}
.cinema-big-500{position:absolute;right:3%;bottom:0;font-size:clamp(150px,21vw,310px);letter-spacing:-.13em;font-weight:900;line-height:.9;color:#ffffffbd;mix-blend-mode:soft-light}
.cinema-big-500 span{font-size:18px;letter-spacing:.13em;display:block;text-align:right;margin-right:7%;margin-bottom:20px;mix-blend-mode:normal}
/* Document-reveal panel. */
.cinema-art-quality{background:radial-gradient(circle,#f7941e15,transparent 65%)}
.cinema-document{position:absolute;width:clamp(215px,28vw,370px);max-height:83%;aspect-ratio:.73;overflow:hidden;background:#fff;border:15px solid white;box-shadow:14px 24px 0 #dee1e1,20px 39px 50px #0003;transform:rotate(5deg);border-radius:6px}
.cinema-document img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.cinema-cert-stamp{position:absolute;bottom:15%;right:1%;padding:16px 22px;border:2px solid var(--cinema-orange);background:white;color:#1b1c1d;font-weight:900;font-size:13px;border-radius:8px;box-shadow:0 12px 40px #0002;transform:rotate(-5deg)}.cinema-cert-stamp b{display:block;color:#f7941e;margin-top:6px}
@keyframes cinema-orbit{to{transform:rotate(360deg)}}
@keyframes cinema-rodfloat{to{translate:0 -15px;filter:brightness(1.15)}}
@media(max-width:950px){:root{--cinema-top:83px}.hero-section{height:148svh;min-height:800px}.hero-section .hero-screen{height:calc(100svh - 100px);min-height:430px}.cinema{height:420svh;min-height:2250px}.cinema-stick{width:100%;padding:32px 0 30px;min-height:360px}.cinema-panel-inner{width:calc(100% - 50px)}.cinema-copy h2{font-size:clamp(44px,5.8vw,67px)}.cinema-rod{width:86%}.cinema-art-420 img{height:46%}}
@media(max-width:650px){:root{--cinema-top:83px}.hero-section{height:136svh;min-height:760px}.hero-section .hero-screen{height:calc(100svh - 103px);min-height:460px}.cinema{height:385svh;min-height:2400px}.cinema-stick{width:100%;min-height:420px;padding:30px 0 28px}.cinema-viewport{border-radius:0}.cinema-panel{border-radius:0}.cinema-panel-inner{grid-template-columns:1fr;grid-template-rows:auto 38%;gap:0;width:calc(100% - 38px);align-content:center}.cinema-copy{padding:30px 0 4px;align-self:end}.cinema-num{font-size:9px;margin-bottom:16px}.cinema-copy h2{font-size:clamp(41px,10.8vw,64px);margin-bottom:14px}.cinema-copy p{font-size:12px;line-height:1.52;margin-bottom:18px}.cinema-cta{padding:12px 15px;font-size:12px}.cinema-footer-note{font-size:8px;left:20px;bottom:18px}.cinema-kicker,.cinema-counter{font-size:8px}.cinema-meter{font-size:7px}.cinema-meter-line{min-width:54px}.cinema-art{min-height:155px;align-self:center}.cinema-halo{width:210px}.cinema-rod{height:31px;width:67%;max-width:320px}.cinema-rod-a{top:25%}.cinema-rod-b{top:45%}.cinema-rod-c{top:65%}.cinema-outline{font-size:104px;right:10%;bottom:-28%}.cinema-floating-label{font-size:7px;padding:9px;top:8%;right:0}.cinema-art-420 img{height:73%;width:85%;object-fit:cover}.cinema-giant-number{font-size:150px}.cinema-grade-tag{padding:8px 12px;font-size:8px;bottom:2%;right:1%}.cinema-grade-tag strong{font-size:14px}.cinema-big-500{font-size:160px;bottom:-34px}.cinema-orbit{width:200px}.cinema-document{width:150px;height:190px;border-width:7px;box-shadow:7px 10px 0 #dee1e1,14px 14px 32px #0003}.cinema-cert-stamp{font-size:9px;padding:9px 10px;bottom:0;right:5%}}
@media(max-height:600px) and (min-width:651px){.cinema-panel-inner{width:calc(100% - 70px)}.cinema-copy h2{font-size:45px}.cinema-num{margin-bottom:12px}.cinema-copy p{margin-bottom:15px}.cinema-copy{padding:12px}.cinema-footer-note{bottom:12px}}
/* Accessibility: disable pinned transforms for reduced motion; show panels as normal content. */
@media(prefers-reduced-motion:reduce){.hero-section{height:auto;min-height:0;margin-bottom:20px}.hero-section .hero-screen{position:relative;top:auto;height:580px;min-height:0;transform:none!important}.cinema{height:auto;min-height:0;padding:35px 0}.cinema-stick{position:relative;top:auto;height:auto;max-height:none;min-height:0;padding:36px 0 35px}.cinema-viewport{height:auto;display:grid;gap:13px;overflow:visible;border-radius:0;background:transparent;box-shadow:none}.cinema-panel{position:relative;opacity:1!important;transform:none!important;filter:none!important;display:block;min-height:440px;inset:auto;pointer-events:auto!important}.cinema-panel-inner{min-height:440px}.cinema-meter-line i{width:100%!important}.cinema-panel .cinema-copy{transform:none!important}}
/* overflow-x:clip avoids accidentally creating a new scroll container that breaks sticky */
body{overflow-x:clip}

@media(max-height:700px) and (max-width:650px){.cinema-panel-inner{grid-template-rows:auto 25%;}.cinema-copy h2{font-size:clamp(34px,9.5vw,45px);margin-bottom:8px}.cinema-num{margin-bottom:7px}.cinema-copy p{font-size:11px;line-height:1.36;margin-bottom:10px}.cinema-cta{padding:9px 11px}.cinema-art{min-height:90px}}


/* V4 — accurate reference-inspired full-viewport -> centered rounded frame -> awards reveal.
   The outer hero remains pinned; the FRAME dimensions change with scroll, not only scale.
   The video continues playing in the same element throughout the sequence. */
:root{--jsrm-hero-top:112px}
.site-header{position:fixed!important;top:0;left:0;right:0;width:100%;background:transparent!important;border-bottom:0!important;box-shadow:none!important;backdrop-filter:none!important;z-index:120}
.site-header.scrolled{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(16px)!important;border-bottom:1px solid #ececec!important}
.hero-section,.hero-section.container{position:relative!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;height:258svh!important;min-height:0!important;background:#fff;isolation:isolate}
.hero-stage{position:sticky;top:0;width:100%;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:#fff}
.hero-section .hero-screen{position:absolute!important;top:0;left:0;width:100%;height:100%;min-height:0!important;max-height:none!important;max-width:none!important;border:0;border-radius:0;transform:none!important;transform-origin:50% 50%;will-change:top,left,width,height,border-radius;box-shadow:none;z-index:3}
.hero-section .hero-video{width:100%;height:100%;object-fit:cover}
.hero-stage .hero-content{transform:translateY(-6px);width:min(920px,100%);margin:0 auto;transition:none;will-change:opacity,transform}
.hero-stage .hero-content h1{font-size:clamp(52px,5.1vw,80px)}
.hero-stage .hero-bottom{bottom:30px}
.hero-awards{position:absolute;left:0;right:0;bottom:2.1%;height:clamp(112px,18.6vh,178px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:7px;opacity:0;transform:translateY(50px);pointer-events:none;z-index:1;padding:0 20px;will-change:opacity,transform}
.hero-awards-row{width:min(1200px,100%);display:grid;grid-template-columns:40px repeat(4,1fr) 40px;gap:14px;align-items:center;text-align:center;min-height:57px}
.hero-awards-decoration{font-size:36px;line-height:1;color:#afb4b7}
.hero-award{display:flex;flex-direction:column;gap:3px;line-height:1.15;text-transform:uppercase}
.hero-award small{font-size:9px;letter-spacing:.11em;color:#a1a5a9;font-weight:700}
.hero-award strong{color:#303339;font-size:clamp(12px,1.3vw,17px);font-weight:850;letter-spacing:-.02em}
.hero-award span{font-size:8px;letter-spacing:.11em;color:#8c9094;font-weight:750}
.hero-partner{display:flex;align-items:center;justify-content:center;gap:15px;min-height:42px;color:#87909a;text-align:left;font-size:12px;line-height:1.35}
.hero-partner img{width:84px;height:auto;max-height:37px;object-fit:contain}
.hero-partner strong{color:#5b6674;font-size:14px}
.hero-partner-mark{display:block;margin-left:5px;color:#666;font-weight:750;border:1px solid #bfc4c8;border-radius:8px;padding:6px 11px;text-align:center;font-size:10px;line-height:1.06}
.hero-partner-mark strong{color:#333;font-size:13px}
.hero-archive-note{font-size:9px;color:#8b9298;text-align:center;margin:0;letter-spacing:.015em}
/* Fixed top navigation does not take space from the original full-screen video. */
#main{padding-top:0}
/* Sequential scene animation: keep the V3 scroll stack but let it begin beneath the new hero. */
.cinema-stick{top:clamp(75px,9vh,105px)}
@media(min-width:1600px){.hero-stage .hero-content h1{font-size:clamp(64px,4.6vw,84px)}}
@media(max-width:950px){:root{--jsrm-hero-top:87px}.hero-section,.hero-section.container{height:235svh!important}.hero-stage{min-height:480px}.hero-stage .hero-content h1{font-size:clamp(48px,7vw,69px)}.hero-awards{height:clamp(130px,22vh,183px)}.hero-awards-row{grid-template-columns:repeat(4,1fr);gap:6px}.hero-awards-decoration{display:none}.hero-award strong{font-size:12px}.hero-award small{font-size:8px}.hero-award span{font-size:7px}}
@media(max-width:650px){:root{--jsrm-hero-top:79px}.site-header .header-inner{height:78px}.hero-section,.hero-section.container{height:220svh!important}.hero-stage{height:100svh;min-height:400px}.hero-stage .hero-content{width:100%;padding:0 18px}.hero-stage .hero-content h1{font-size:clamp(37px,9.8vw,57px);margin:18px auto}.hero-stage .hero-subtitle{font-size:12px}.hero-stage .hero-bottom{bottom:19px;left:16px;right:16px}.hero-awards{padding:0 10px;height:clamp(165px,26vh,208px);bottom:5px;gap:6px}.hero-awards-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 7px;min-height:95px}.hero-award{gap:1px}.hero-award small{font-size:7px}.hero-award strong{font-size:12px}.hero-award span{font-size:6px}.hero-partner{gap:8px;font-size:9px;min-height:30px}.hero-partner img{width:55px}.hero-partner strong{font-size:10px}.hero-partner-mark{font-size:8px;padding:4px 6px}.hero-partner-mark strong{font-size:10px}.hero-archive-note{font-size:8px;line-height:1.25}}
@media(max-height:640px) and (min-width:651px){.hero-awards{bottom:1.2%;height:125px}.hero-awards-row{min-height:47px}.hero-partner{min-height:35px}.hero-stage .hero-content h1{font-size:clamp(43px,6.2vh,60px)}}
@media(prefers-reduced-motion:reduce){.site-header{position:sticky!important;background:#fff!important}.hero-section,.hero-section.container{height:auto!important;min-height:0!important}.hero-stage{position:relative;height:auto;min-height:0;overflow:visible}.hero-section .hero-screen{position:relative!important;top:auto!important;left:auto!important;width:100%!important;height:min(690px,100svh)!important;min-height:430px!important;border-radius:0!important}.hero-awards{position:relative;transform:none!important;opacity:1!important;height:auto;padding:20px 16px;bottom:auto;gap:22px}.hero-stage .hero-content{opacity:1!important;transform:none!important}}

/* Tiny offscreen fragments of incoming zoomed panels must never create mobile horizontal scroll. */
html,body{max-width:100%;overflow-x:clip}
.cinema{overflow:clip}

@media(max-height:700px) and (max-width:650px){.hero-stage .hero-content h1{font-size:clamp(34px,8.6vw,42px);line-height:1.02}.hero-stage .hero-subtitle{display:none}.hero-stage .hero-buttons{margin-top:12px}.hero-stage .hero-eyebrow{font-size:7px}.hero-stage .hero-bottom>span:first-child{display:none}}