/* Three scenes: welcome, savoir-faire, materials. */
:root{--header-h:96px;--pad:max(72px,5.2vw)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header and Maq'Exe logo */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;height:var(--header-h);padding:0 var(--pad);border-bottom:0;background:linear-gradient(180deg,rgba(9,9,9,.82),rgba(9,9,9,.35) 62%,rgba(9,9,9,0))}
.brand-logo{display:block;flex:none;line-height:0}
.brand-logo img{display:block;height:66px;width:auto;filter:drop-shadow(0 2px 12px #000a)}
.site-header nav a{transition:color .3s,box-shadow .4s}
html[data-scene="1"] .site-header nav a[href="#savoir-faire"],html[data-scene="2"] .site-header nav a[href="#matieres"]{color:#fff;box-shadow:inset 0 -1px 0 var(--gold)}

/* Scene 1: welcome */
.scene-intro{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:grid;grid-template-rows:1fr auto;padding-top:var(--header-h)}
.intro-media{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#0d0a07}
.intro-image{display:block;width:100%;height:100%;object-fit:cover;object-position:58% 50%;transform-origin:74% 42%}
.intro-light{position:absolute;inset:-10%;background:radial-gradient(ellipse 42% 58% at 84% 6%,rgba(255,198,122,.24),transparent 70%);mix-blend-mode:screen;animation:introBreathe 7s ease-in-out infinite alternate;pointer-events:none}
.intro-veil{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(9,9,9,.94) 0%,rgba(9,9,9,.76) 30%,rgba(9,9,9,.2) 60%,rgba(9,9,9,0) 78%),linear-gradient(0deg,rgba(9,9,9,.9) 0%,rgba(9,9,9,0) 28%)}
.intro-copy{align-self:center;max-width:calc(660px + var(--pad));padding:0 0 4vh var(--pad)}
.intro-copy .eyebrow{margin:0 0 26px;color:#d8b88b;font-size:11px;letter-spacing:.24em}
.intro-copy h1{margin:0;font:400 clamp(56px,6.4vw,112px)/.94 var(--serif);letter-spacing:-.025em;text-shadow:0 4px 40px #0008}
.intro-copy h1:focus{outline:0}
.intro-lead{max-width:470px;margin:30px 0 0;color:#d6cec3;font-size:15px;line-height:1.8}
.intro-cta{display:inline-flex;align-items:center;gap:14px;margin-top:38px;padding:15px 22px;border:1px solid rgba(216,184,139,.55);background:rgba(9,9,9,.28);color:#f2e6d4;font-size:13px;letter-spacing:.04em;backdrop-filter:blur(6px);transition:background .4s,border-color .4s,color .4s}
.intro-cta span{color:var(--gold);font-size:18px;line-height:1;transition:transform .5s,color .4s}
.intro-cta:hover{background:#d0b18b;border-color:#d0b18b;color:#15100c}
.intro-cta:hover span{color:#15100c;transform:rotate(90deg)}
.intro-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;padding:0 var(--pad) 30px;color:#a99e90;font-size:10px;letter-spacing:.16em}
.intro-foot p{margin:0}
.intro-foot p span{padding:0 12px;color:#6c5f4f}
.intro-place{text-align:right}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:12px;color:#d9cbb8;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.scroll-cue i{position:relative;overflow:hidden;width:1px;height:46px;background:rgba(255,255,255,.18)}
.scroll-cue i:after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:#d8b88b;animation:scrollCue 2.2s cubic-bezier(.6,0,.3,1) infinite}
.scene-intro.is-current .intro-image,.scenes-off .scene-intro.is-shown .intro-image{animation:introDrift 16s cubic-bezier(.2,.6,.3,1) both}

/* Scene 2 and 3 headings */
.scene :is(h2)[tabindex="-1"]:focus{outline:0}
.materials-links{display:flex;align-items:center;gap:30px}
.site-information{color:#8f867a;font-size:11px;transition:color .3s}
.site-information:hover{color:#d8cdbf}
.dialog-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px;margin-top:30px}

/* Fade-in of headings and tiles */
.scenes-on .scene.is-current .reveal,.scenes-off .scene.is-shown .reveal{animation:sceneRise 1.05s cubic-bezier(.16,.84,.3,1) calc(.24s + var(--i,0) * .09s) backwards}
.scenes-off .scene:not(.is-shown) .reveal{opacity:0}

/* Full-screen scene mode (large screens) */
.scenes-on,.scenes-on body{height:100%;overflow:hidden;overscroll-behavior:none}
.scenes-on .site-header{position:fixed}
.scenes-on .scene-stage{position:fixed;inset:0;overflow:hidden}
.scenes-on .scene{position:absolute;inset:0;max-width:none;margin:0;padding:0;overflow:clip;opacity:0;visibility:hidden;transition:opacity .7s cubic-bezier(.4,0,.2,1),visibility 0s linear .7s}
.scenes-on .scene.is-current{opacity:1;visibility:visible;transition:opacity .75s cubic-bezier(.4,0,.2,1) .1s,visibility 0s}
.scenes-on .scene-intro{padding-top:var(--header-h)}
.scenes-on .scene-inner{display:flex;flex-direction:column;justify-content:center;height:100%;max-width:1760px;margin:0 auto;padding:calc(var(--header-h) + 2px) var(--pad) 28px}
.scenes-on .scene:not(.is-current) :is(.scene-inner,.intro-copy,.intro-foot){transform:translateY(calc(var(--scene-dir,1) * -40px));transition:transform .7s cubic-bezier(.4,0,.2,1)}
.scenes-on .scene-skills .hero-heading{padding:6px 2px 18px}
.scenes-on .hero-grid{flex:1;min-height:0;max-height:880px;grid-template-rows:1fr 1fr}
.scenes-on .hero-grid .project-tile{height:auto;min-height:0}
.scenes-on .hero-foot{padding:16px 2px 0}
.scenes-on .scene-materials .section-heading{margin-bottom:24px}
.scenes-on .material-strips{display:flex;flex:1;min-height:0;max-height:660px;height:auto}
.scenes-on .material-tile,.scenes-on .material-tile:last-child{height:auto;min-height:0}
.scenes-on .materials-foot{margin-top:18px}

/* Scene progress */
.scene-dots{display:none}
.scenes-on .scene-dots{position:fixed;z-index:15;right:18px;top:50%;display:flex;flex-direction:column;gap:4px;transform:translateY(-50%)}
.scene-dots button{position:relative;display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:8px;padding:9px 0;color:#7f776d;font-size:10px;letter-spacing:.12em;transition:color .4s}
.scene-dots button:before{content:'';width:10px;height:1px;background:currentColor;transition:width .55s cubic-bezier(.2,.7,.2,1)}
.scene-dots button:hover,.scene-dots button:focus-visible{color:#e2d6c6}
.scene-dots button[aria-current]{color:var(--gold)}
.scene-dots button[aria-current]:before{width:22px}
.dot-label{position:absolute;right:calc(100% + 12px);padding:5px 9px;background:#0d0c0bd9;color:#e2d6c6;font-size:11px;letter-spacing:.06em;white-space:nowrap;opacity:0;transform:translateX(6px);transition:opacity .35s,transform .35s;pointer-events:none}
.scene-dots button:hover .dot-label,.scene-dots button:focus-visible .dot-label{opacity:1;transform:none}

/* Stacked sections (phones, tablets in portrait, short windows) */
.scenes-off .site-header:has(nav.open){background:#090909f5}
.scenes-off .scene-skills{padding-top:58px}
.scenes-off .scene-materials{padding-bottom:56px}
@media(max-width:1100px){.scenes-off .site-header{padding:0 4.3%}}
@media(max-width:700px){
  :root{--header-h:84px}
  .scenes-off .site-header{height:auto;min-height:var(--header-h);padding:14px 6%}
  .brand-logo img{height:54px}
  .scene-intro{grid-template-rows:1fr auto}
  .intro-image{object-position:72% 50%}
  .intro-veil{background:linear-gradient(0deg,rgba(9,9,9,.97) 6%,rgba(9,9,9,.72) 44%,rgba(9,9,9,.12) 78%,rgba(9,9,9,.3) 100%)}
  .intro-copy{align-self:end;padding:0 7% 34px;max-width:none}
  .intro-copy .eyebrow{margin-bottom:18px;font-size:9px;letter-spacing:.16em}
  .intro-copy h1{font-size:clamp(46px,14vw,64px)}
  .intro-lead{margin-top:20px;font-size:14px;line-height:1.7}
  .intro-cta{margin-top:26px;padding:13px 18px}
  .intro-foot{grid-template-columns:1fr auto;padding:0 7% 24px;font-size:8px;letter-spacing:.1em}
  .intro-foot p span{padding:0 5px}
  .intro-place{display:none}
  .scroll-cue span{display:none}
  .scroll-cue i{height:34px}
  .scenes-off .scene-skills{padding-top:40px}
  .materials-links{flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
}

@keyframes sceneRise{from{opacity:0;transform:translateY(calc(var(--scene-dir,1) * 42px))}}
@keyframes introDrift{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes introBreathe{from{opacity:.35;transform:translate3d(0,0,0)}to{opacity:.95;transform:translate3d(-1.5%,1%,0)}}
@keyframes scrollCue{to{top:100%}}
@media(prefers-reduced-motion:reduce){.scenes-off .scene:not(.is-shown) .reveal{opacity:1}}

/* Links to every indexable page (footer of scene 3 / end of the page on mobile) */
.site-index{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:12px;font-size:11px;letter-spacing:.04em;color:#8f867a}
.site-index a{transition:color .3s}.site-index a:hover{color:#e2d6c6}
.scenes-on .site-index{margin-top:10px}
@media(max-width:700px){.site-index{justify-content:flex-start;gap:8px 14px;margin-top:22px}}