/* A single entrance to SMC. All styling is local to this prototype. */
:root { color-scheme:light; --paper:#fafaf7; --ink:#252e32; --muted:#7d817e; --line:#daddd6; --gold:#b6975f; --yellow:#ffe72b; --ease:cubic-bezier(.45,0,.25,1); --stage-h:clamp(280px,calc(100svh - 340px),1100px); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:2px solid #a48952; outline-offset:5px; }
.home { width:min(100% - clamp(40px,7.2vw,280px),2800px); min-height:100svh; margin:auto; display:flex; flex-direction:column; }
.home-header { min-height:104px; display:flex; align-items:center; gap:50px; border-bottom:1px solid var(--line); }
.home-header h1 { margin:0; font-size:0; }
.home-header h1 img { display:block; width:clamp(220px,18vw,360px); height:auto; mix-blend-mode:multiply; }
.header-note { margin-left:auto; margin-right:clamp(20px,5vw,120px); font-size:13px; line-height:1.55; color:#787d7c; }
.contact-label-mobile { display:none; }
.contact-link { display:flex; align-items:center; gap:25px; font-size:14px; white-space:nowrap; }
.contact-link svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform 400ms var(--ease); }
.contact-link:hover svg { transform:translate(3px,-3px); }
.entrance { margin:auto 0; }
.stage { position:relative; height:var(--stage-h); margin:24px 0 0; --half:calc(var(--stage-h) * .405); --quarter:calc(var(--stage-h) * .2025); --mark:polygon(calc(50% - var(--half)) 30%,50% 47.5%,calc(50% + var(--half)) 30%,calc(50% + var(--half)) 87.5%,calc(50% + var(--quarter)) 97%,calc(50% + var(--quarter)) 56%,50% 65.5%,calc(50% - var(--quarter)) 56%,calc(50% - var(--quarter)) 97%,calc(50% - var(--half)) 87.5%); }
.stage-rule { position:absolute; inset:0 0 auto; display:flex; justify-content:space-between; font-size:10px; text-transform:uppercase; letter-spacing:.13em; color:#8b908b; transition:opacity 650ms var(--ease); }
.brand-geometry { z-index:1; position:absolute; inset:0; pointer-events:none; }
.mark-crown { position:absolute; inset:0; background:var(--yellow); clip-path:polygon(calc(50% - var(--half)) 2%,50% 19.5%,calc(50% + var(--half)) 2%,calc(50% + var(--half)) 19.5%,50% 37%,calc(50% - var(--half)) 19.5%); transition:transform 1400ms var(--ease),opacity 700ms var(--ease); }
.mark-shadow { position:absolute; inset:0; background:#e8e7df; clip-path:var(--mark); --shadow-x:clamp(10px,1vw,22px); transform:translate(var(--shadow-x),calc(var(--shadow-x) * 1.8)); opacity:1; transition:opacity 650ms var(--ease) 950ms; }
.home-intro .mark-shadow { transition:none; }
.image-aperture { z-index:2; will-change:clip-path; position:absolute; inset:0; clip-path:var(--mark); isolation:isolate; overflow:hidden; background:#d2cdc0 url("assets/company/photography/spb-forging-480.webp") center 60%/cover; transition:clip-path 1500ms var(--ease); }
.scene { will-change:opacity; position:absolute; inset:0; opacity:0; transition:opacity 900ms var(--ease); }
.scene.is-active { opacity:1; }
.scene img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 59%; transform:scale(1.14); transition:transform 1600ms var(--ease); }
.scene[data-scene="intro"] img { object-position:50% 60%; }
.scene[data-scene="catalog"] img { object-position:50% 57%; }
.scene[data-scene="manufacture"] img { object-position:50% 52%; }
.photo-shade { position:absolute; inset:0; background:linear-gradient(90deg,#090b0db3 0%,#090b0d1a 55%,transparent 85%); opacity:0; transition:opacity 1000ms var(--ease); }
.intro-copy { position:absolute; top:37%; left:0; max-width:30%; transition:opacity 650ms var(--ease),transform 1100ms var(--ease); }
.eyebrow { display:block; font-size:14px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:#626b64; margin-bottom:20px; }
.intro-copy p { margin:0; font-size:clamp(32px,3.2vw,80px); line-height:1.14; letter-spacing:-.052em; font-weight:480; }
.intro-copy em { font-style:normal; color:#a18c68; }
.intro-aside { position:absolute; right:0; top:37%; width:20%; visibility:visible; transition:opacity 650ms var(--ease),transform 1100ms var(--ease),visibility 0s; }
.since { display:block; font-size:17px; color:#59665c; white-space:nowrap; }
.since strong { font-size:clamp(40px,3.8vw,90px); letter-spacing:-.06em; font-weight:400; color:#39433e; padding:0 4px; }
.aside-line { display:block; width:40px; height:1px; background:#b6a482; margin:16px 0; }
.intro-aside p { font-size:18px; line-height:1.5; color:#59665c; margin:0 0 12px; }
.intro-aside a { display:inline-flex; align-items:center; gap:20px; font-size:16px; margin-top:4px; border-bottom:1px solid #c6b89e; padding-bottom:5px; }
.stage-bottom { position:absolute; inset:auto 0 14px; display:flex; justify-content:flex-end; gap:20px; font-size:14px; color:#626b64; transition:opacity 650ms var(--ease); pointer-events:none; }
.intro-copy > .eyebrow:first-child { position:absolute; bottom:100%; margin:0 0 20px; }
.intro-copy .home-motto { margin:20px 0 0; }
.explore-note { display:flex; gap:20px; }
.explore-note span { color:#9e855a; font-size:16px; line-height:12px; }
.panorama-caption { position:absolute; left:5%; top:50%; transform:translateY(calc(-40% + 15px)); color:white; opacity:0; transition:opacity 500ms var(--ease),transform 900ms var(--ease); pointer-events:none; }
.panorama-caption>span { text-transform:uppercase; font-size:14px; letter-spacing:.12em; color:#f0ebdf; }
.panorama-caption strong { display:block; font-size:clamp(44px,6.5vw,145px); line-height:.98; font-weight:450; letter-spacing:-.055em; margin:24px 0 26px; }
.panorama-caption p { font-size:17px; color:#fffdf6dc; line-height:1.5; }
.photo-location { position:absolute; bottom:24px; right:30px; color:#ffffffb8; font-size:11px; opacity:0; transition:opacity 650ms var(--ease); }
.entrance.has-preview .image-aperture { clip-path:polygon(0% 0%,50% 0%,100% 0%,100% 100%,75% 100%,75% 100%,50% 100%,25% 100%,25% 100%,0% 100%); }
.entrance.has-preview .mark-crown { transform:translateY(-30%); opacity:0; }
.entrance.has-preview .mark-shadow { opacity:0; transition-duration:450ms; transition-delay:0ms; }
.entrance.has-preview .intro-copy { opacity:0; transform:translateX(-20px); pointer-events:none; }
.entrance.has-preview .intro-aside { opacity:0; transform:translateX(20px); pointer-events:none; visibility:hidden; transition-delay:0s,0s,650ms; }
.entrance.has-preview .stage-rule,.entrance.has-preview .stage-bottom { opacity:0; }
.entrance.has-preview .scene.is-active img { transform:scale(1); }
.entrance.has-preview .photo-shade { opacity:1; }
.entrance.has-preview .panorama-caption.is-active { opacity:1; transform:translateY(-40%); transition-delay:450ms; }
.entrance.has-preview .photo-location { opacity:1; transition-delay:500ms; }
.directions { display:grid; grid-template-columns:1fr 1.15fr 1fr; border-top:1px solid #aeb4ad; border-bottom:1px solid #d5d9d1; margin-top:24px; }
.direction { position:relative; min-width:0; display:flex; gap:clamp(15px,2vw,48px); align-items:center; padding:24px 30px 26px; transition:background 500ms var(--ease); }
.direction:first-child { padding-left:0; }
.direction:last-child { padding-right:0; }
.direction+.direction { border-left:1px solid var(--line); }
.direction::before { content:''; position:absolute; left:0; right:0; top:-1px; height:2px; background:#a38a60; transform:scaleX(0); transform-origin:left; transition:transform 450ms var(--ease); }
.direction-index { align-self:flex-start; padding-top:7px; font-size:10px; letter-spacing:.05em; color:#8e948b; }
.direction-copy h2 { font-size:clamp(26px,2.6vw,60px); letter-spacing:-.04em; line-height:1.1; font-weight:450; margin:0 0 12px; }
.direction-copy p { color:#626b64; font-size:14px; margin:0; line-height:1.4; }
.direction-arrow { display:grid; place-items:center; flex-shrink:0; width:clamp(42px,4vw,76px); height:clamp(42px,4vw,76px); margin-left:auto; color:#a18c66; border-radius:50%; transition:background 550ms var(--ease),color 550ms var(--ease),transform 650ms var(--ease); }
.direction-arrow svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.3; }
.direction:is(:hover,:focus-visible,.is-preview)::before { transform:scaleX(1); }
.direction:is(:hover,:focus-visible,.is-preview) .direction-arrow { background:var(--yellow); color:#273029; transform:rotate(45deg); }
.home-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; color:#8a8e86; font-size:10px; min-height:56px; margin-top:8px; }
.home-footer i { font-style:normal; padding:0 9px; color:#b09c77; }
.home-footer>a { color:#59635b; font-size:12px; }
.home-footer>a>span { margin-left:15px; color:#8a8e86; font-size:10px; }
@media(min-width:1800px) {
  :root { --stage-h:clamp(500px,calc(100svh - 470px),1200px); }
  .home-header { min-height:146px; }
  .header-note,.contact-link { font-size:17px; }
  .intro-aside p { font-size:clamp(22px,1.1vw,32px); }
  .since { font-size:23px; }
  .stage-rule,.photo-location,.home-footer,.home-footer>a>span { font-size:14px; }
  .eyebrow,.intro-aside a,.stage-bottom { font-size:clamp(18px,.9vw,24px); }
  .direction-index { font-size:14px; }
  .direction { padding-top:38px; padding-bottom:40px; }
  .direction-copy p,.home-footer>a { font-size:17px; }
  .panorama-caption p { font-size:20px; }
  .home-footer { min-height:80px; }
}
@media(max-width:1100px) {
  .header-note { display:none; }
  .contact-link { margin-left:auto; }
  .intro-copy p { font-size:29px; }
  .intro-aside { width:21%; }
  .intro-aside p { font-size:16px; }
  .intro-aside a { font-size:15px; }
  .stage-bottom { font-size:12px; }
  .stage { --half:min(calc(var(--stage-h) * .405),22vw); --quarter:calc(var(--half) * .5); }
  .direction { padding:26px 18px; gap:14px; }
  .direction-copy h2 { font-size:27px; }
  .direction-copy p { max-width:170px; font-size:13px; }
  .direction-arrow { width:34px; height:34px; }
  .direction-arrow svg { width:20px; height:20px; }
}
@media(max-width:900px) {
  :root { --stage-h:clamp(230px,calc(100svh - 520px),350px); }
  .home { width:calc(100% - 40px); }
  .home-header { min-height:95px; gap:16px; }
  .home-header h1 img { width:200px; }
  .contact-label-desktop { display:none; }
  .contact-label-mobile { display:inline; font-size:11px; }
  .contact-link { gap:8px; height:44px; justify-content:center; }
  .contact-link svg { width:14px; height:14px; }
  .entrance { margin:0; }
  .stage { margin-top:22px; }
  .stage-rule { font-size:8px; }
  .intro-copy { top:unset; bottom:4px; width:100%; max-width:none; text-align:center; }
  .eyebrow { display:none; }
  .intro-copy p { font-size:15px; line-height:1.4; letter-spacing:-.02em; }
  .intro-copy br { display:none; }
  .intro-copy em { color:var(--ink); }
  .intro-aside,.stage-bottom,.mark-shadow { display:none; }
  .stage { --half:112px; --quarter:56px; }
  .image-aperture,.brand-geometry { bottom:44px; }
  .image-aperture { transition-duration:1200ms; }
  .mark-crown { top:7px; }
  .scene img { width:100%; object-position:50% 50%; }
  .panorama-caption { left:7%; }
  .panorama-caption strong { font-size:43px; margin:14px 0; }
  .panorama-caption>span { font-size:9px; }
  .panorama-caption p { font-size:12px; max-width:230px; }
  .photo-location { display:none; }
  .directions { display:block; margin-top:16px; }
  .direction,.direction:first-child,.direction:last-child { padding:21px 0; gap:20px; }
  .direction+.direction { border-left:0; border-top:1px solid var(--line); }
  .direction-copy h2 { font-size:28px; margin-bottom:7px; }
  .direction-copy p { max-width:none; font-size:12px; }
  .direction-index { padding-top:4px; }
  .direction-arrow { width:42px; height:42px; background:#f1f0e8; }
  .home-footer { margin-top:auto; padding:22px 0; min-height:88px; flex-wrap:wrap; gap:12px; font-size:9px; }
  .home-footer>span:first-child { order:2; }
  .home-footer>span:nth-child(2) { width:100%; font-size:11px; }
  .home-footer>a { order:3; font-size:11px; }
  .home-footer>a>span { display:none; }
}
@media(max-width:370px) { .home { width:calc(100% - 32px); }.home-header h1 img { width:190px; }.direction-copy p { font-size:11px; } }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important; animation:none!important; }
}


/* The opening is a separate front layer. The real page appears beneath it;
   only a clipped photograph and its transform animate, never the page layout. */
.opening { display:none; position:fixed; inset:0; z-index:100; isolation:isolate; pointer-events:none; }
.home-intro .opening { display:block; }
.opening-paper { position:absolute; inset:0; background:#fff; }
.opening-photo { position:absolute; inset:0; opacity:0; overflow:hidden; will-change:clip-path,opacity; }
.opening-photo img { position:absolute; left:0; top:0; max-width:none; transform-origin:0 0; will-change:transform; }
.opening-filter { position:absolute; }
.opening-shade { position:absolute; inset:0; background:#08100de0; opacity:.3; }
.opening-logo { position:absolute; inset:0; display:grid; place-items:center; }
.opening-logo img { grid-area:1 / 1; display:block; width:clamp(190px,24vw,360px); max-width:80vw; height:auto; }
.opening-logo-original { mix-blend-mode:multiply; }
.opening-logo-light { filter:url(#opening-logo-light); opacity:0; }
.home-intro .home { opacity:0; }
.home-intro.is-unfolding .home { opacity:1; transition:opacity 1800ms var(--ease); }
/* Keep the complete base aperture, including its fallback photo, invisible
   until the moving photograph has reached the same silhouette and crop. */
.home-intro .image-aperture { opacity:0; }
.home-intro.is-photo-landed .image-aperture { opacity:1; }
@media(prefers-reduced-motion:reduce) { .opening { display:none!important; }.home-intro .home { opacity:1; } }