/* Three uses, three physical compositions, around the existing 3D monogram. */
.scene-example { position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; transform:translate3d(0,16px,-35px); transition:opacity 550ms ease,transform 800ms cubic-bezier(.22,1,.36,1),visibility 800ms; }
.hero-visual[data-scene="application"] [data-scene-panel="application"],
.hero-visual[data-scene="automation"] [data-scene-panel="automation"],
.hero-visual[data-scene="travail"] [data-scene-panel="travail"] { opacity:1; visibility:visible; transform:translate3d(0,0,0); pointer-events:auto; }
.scene-example[aria-hidden="true"] * { animation-play-state:paused; }
.scene-example .scene-note { top:138px; }
.scene-example .scene-note strong { font-size:23px; line-height:1.28; }
.scene-example .scene-note-tag { font-size:8px; }
.scene-published>span svg { width:21px; height:21px; }
.hero-visual[data-scene="automation"] .hero-sculpture { transform:translate(-12px,-12px) rotate(-3deg); }
.hero-visual[data-scene="travail"] .hero-sculpture { transform:translate(10px,-20px) rotate(4deg); }
[data-scene-panel="automation"] .scene-note { background:#edf0e7; border-color:#d6ddc9; box-shadow:1px 2px 0 #cdd6c2,3px 5px 0 #e1e8d7,8px 20px 30px #394e3214; transform:rotate(-9deg) translateY(-4px); }
[data-scene-panel="automation"] .scene-note strong { color:#455440; }
[data-scene-panel="automation"] .scene-note p,[data-scene-panel="automation"] .scene-note-top { color:#6a755e; }
[data-scene-panel="automation"] .scene-note-line { border-color:#acb998; }
[data-scene-panel="automation"] .scene-note-tag { background:#dce4cf; color:#57664b; }
[data-scene-panel="automation"] .scene-published>span { background:#667d57; }
.hero-visual .automation-window { transform:perspective(1000px) rotateX(7deg) rotateY(-13deg) rotateZ(2deg); }
.hero-visual .automation-window .project-heading,.hero-visual .work-window .project-heading { margin-top:0; }
.flow-live { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#eef2e9; }
.flow-live i { width:7px; height:7px; border-radius:50%; background:#839b71; box-shadow:0 0 0 4px #839b7115; animation:flow-breathe 3s ease-in-out infinite; }
.task-flow { margin:17px 0 4px; }
.flow-step { display:flex; align-items:center; position:relative; gap:11px; padding:10px 11px; border:1px solid #e7e9e1; background:#fafbf7; border-radius:9px; }
.flow-step+.flow-step { margin-top:13px; }
.flow-step+.flow-step::before { content:""; position:absolute; left:27px; bottom:calc(100% + 1px); height:13px; width:2px; background:linear-gradient(#b0c09b,#dbe3d1); }
.flow-icon { width:31px; height:31px; display:grid; place-items:center; border:1px solid #dfe5d4; border-radius:8px; background:#edf1e7; color:#71845e; flex-shrink:0; }
.flow-icon svg { width:19px; height:19px; }
.flow-step strong { display:block; font-size:11px; font-weight:500; line-height:1.35; }
.flow-step small { display:block; font-size:9px; line-height:1.5; margin-top:2px; color:#65665d; }
.flow-check { margin-left:auto; color:#748963; font-size:13px; animation:flow-confirm 6s ease-in-out infinite; }
.flow-step:nth-child(2) .flow-check { animation-delay:1s; }
.flow-review { background:#f4eff9; border-color:#e4d9ef; }
.flow-review .flow-icon { background:#e9def5; border-color:#e0d1ed; color:#8767aa; }
.flow-review-dot { width:7px; height:7px; border:1px solid #9c80b8; border-radius:50%; margin-left:auto; }
[data-scene-panel="travail"] .scene-note { transform:rotate(-13deg) translateY(-5px); }
[data-scene-panel="travail"] .scene-published>span { background:#9c7250; }
.hero-visual .work-window { transform:perspective(1000px) rotateX(7deg) rotateY(-12deg) rotateZ(5deg); }
.document-mark { display:grid; place-items:center; width:32px; height:34px; border-radius:6px; background:#f6eddf; color:#a78156; font:17px var(--serif); }
.work-document { position:relative; margin-top:16px; border-top:1px solid #e8e0d7; }
.document-line { display:flex; gap:13px; align-items:flex-start; padding:11px 0; border-bottom:1px solid #eee9e3; }
.document-line>span { font-size:9px; color:#b4a38e; padding-top:2px; }
.document-line strong { display:block; width:fit-content; font:400 15px/1.3 var(--serif); }
.document-line p { font-size:9px; line-height:1.5; margin-top:3px; color:#7e7469; }
.document-line:nth-child(2) strong { background:linear-gradient(transparent 58%,#efe1be 58%); }
.document-foot { display:flex; align-items:center; gap:7px; margin:10px 0 3px; font-size:9px; color:#75654f; }
.document-foot>span { color:#9e805a; }

/* Application: a browser assembles, then its rows settle into place. */
[data-scene-panel="application"][aria-hidden="false"] .project-window { animation:application-lift 4.8s ease-in-out infinite; }
[data-scene-panel="application"][aria-hidden="false"] .table-row { animation:application-build 4.8s cubic-bezier(.22,1,.36,1) infinite both; }
[data-scene-panel="application"][aria-hidden="false"] .table-row:nth-child(3) { animation-delay:300ms; }
[data-scene-panel="application"][aria-hidden="false"] .project-plus { animation:application-add 4.8s ease-in-out infinite; }
[data-scene-panel="application"][aria-hidden="false"] .scene-note { animation:application-idea 4.8s ease-in-out infinite; }

/* Automation: independent steps relay a request along a floating chain. */
.hero-visual .automation-window { top:223px; right:2px; width:390px; max-width:calc(100% - 12px); overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; transform:perspective(1000px) rotateY(-5deg) rotateZ(-2deg); }
.hero-visual .automation-window .window-bar { display:none; }
.hero-visual .automation-window .project-content { padding:0; }
.hero-visual .automation-window .project-heading { margin-left:17px; padding:9px 12px; background:#fffdf9; border:1px solid #e4e7dc; border-radius:10px; box-shadow:0 8px 18px #35432f0c; }
.hero-visual .automation-window .project-heading h2 { font-size:22px; }
.task-flow { margin:20px 0 0; }
.flow-step { width:calc(100% - 46px); min-height:56px; padding:10px 13px; background:#fffefa; border:1px solid #dce3d3; border-radius:11px; box-shadow:0 3px 0 #e1e7d9,0 12px 24px #35432f16; }
.flow-step:nth-child(2) { margin-left:22px; }
.flow-step:nth-child(3) { margin-left:44px; }
.flow-step+.flow-step { margin-top:19px; }
.flow-step+.flow-step::before { left:18px; bottom:calc(100% + 3px); height:17px; width:24px; border-left:2px solid #bacaa8; border-bottom:2px solid #bacaa8; border-radius:0 0 0 7px; background:none; transform:translateX(-22px); }
.flow-step+.flow-step::after { content:""; position:absolute; left:11px; top:-10px; width:6px; height:6px; border-radius:50%; background:#7e9769; box-shadow:0 0 0 4px #e6eddc; }
.flow-review { background:#f6f0fc; border-color:#ddd0ec; box-shadow:0 3px 0 #e5daef,0 12px 24px #5c40701a; }
[data-scene-panel="automation"] .scene-published { top:169px; right:5px; transform:rotate(3deg); animation:none; }
[data-scene-panel="automation"][aria-hidden="false"] .flow-step { animation:automation-relay 4.8s ease-in-out infinite; }
[data-scene-panel="automation"][aria-hidden="false"] .flow-step:nth-child(2) { animation-delay:450ms; }
[data-scene-panel="automation"][aria-hidden="false"] .flow-step:nth-child(3) { animation-delay:900ms; }
[data-scene-panel="automation"][aria-hidden="false"] .flow-step+.flow-step::after { animation:automation-signal 4.8s ease-in-out infinite; }
[data-scene-panel="automation"][aria-hidden="false"] .flow-step:nth-child(3)::after { animation-delay:450ms; }
[data-scene-panel="automation"][aria-hidden="false"] .scene-note { animation:automation-request 4.8s ease-in-out infinite; }
[data-scene-panel="automation"][aria-hidden="false"] .scene-published { animation:automation-result 4.8s ease-in-out infinite; }

/* Daily work: a sheet of paper opens and its outline is written in sequence. */
.hero-visual .work-window { top:223px; right:22px; width:360px; max-width:calc(100% - 24px); border:1px solid #e4dccc; border-radius:4px 15px 15px 4px; background:#fffdf7; overflow:visible; box-shadow:0 5px 0 -2px #f0e9dd,0 9px 0 -4px #dcd0bc,0 25px 45px #67533c20; transform:perspective(1000px) rotateX(2deg) rotateY(-4deg) rotateZ(2deg); }
.hero-visual .work-window::before { content:""; position:absolute; inset:7px -7px -7px 7px; border:1px solid #e7ddcd; border-radius:4px 13px 13px 4px; background:#f5efdf; transform:rotate(-4deg); transform-origin:bottom left; z-index:-1; }
.hero-visual .work-window::after { content:""; position:absolute; inset:0; border-radius:inherit; background:#fffdf7; z-index:0; pointer-events:none; }
.hero-visual .work-window .window-bar,.hero-visual .work-window .project-content { position:relative; z-index:1; }
.hero-visual .work-window .window-bar { height:32px; margin:0 20px; padding:0; background:none; border-bottom:1px solid #e8dfcf; color:#927e61; }
.work-window .window-dots { display:none; }
.hero-visual .work-window .project-content { padding:17px 23px 14px; }
.hero-visual .work-window .project-heading h2 { font-size:24px; }
.work-document { border-top:0; margin-top:15px; }
.document-line { border-color:#ebe3d5; padding:11px 0; }
.document-line strong { background:linear-gradient(transparent 57%,#eee0bc 57%); background-size:0 100%; background-repeat:no-repeat; }
.document-line:nth-child(2) strong { background-size:0 100%; background-repeat:no-repeat; }
[data-scene-panel="travail"] .scene-note { top:124px; transform:rotate(-6deg); }
[data-scene-panel="travail"] .scene-published { top:176px; right:12px; transform:rotate(-3deg); animation:none; }
[data-scene-panel="travail"][aria-hidden="false"] .work-window { animation:work-paper 4.8s ease-in-out infinite; }
[data-scene-panel="travail"][aria-hidden="false"] .work-window::before { animation:work-pages 4.8s ease-in-out infinite; }
[data-scene-panel="travail"][aria-hidden="false"] .document-line { animation:work-outline 4.8s cubic-bezier(.22,1,.36,1) infinite both; }
[data-scene-panel="travail"][aria-hidden="false"] .document-line strong { animation:work-highlight 4.8s ease-in-out infinite; }
[data-scene-panel="travail"][aria-hidden="false"] .document-line:nth-child(2),
[data-scene-panel="travail"][aria-hidden="false"] .document-line:nth-child(2) strong { animation-delay:400ms; }
[data-scene-panel="travail"][aria-hidden="false"] .document-line:nth-child(3),
[data-scene-panel="travail"][aria-hidden="false"] .document-line:nth-child(3) strong { animation-delay:800ms; }
[data-scene-panel="travail"][aria-hidden="false"] .scene-published { animation:work-finish 4.8s ease-in-out infinite; }

@keyframes application-lift { 0%,100% { translate:0 0; } 45% { translate:0 -11px; } }
@keyframes application-build { 0%,100% { opacity:.45; translate:0 9px; } 17%,82% { opacity:1; translate:0 0; } }
@keyframes application-add { 0%,100% { scale:1; } 12%,24% { scale:1.14; } 36% { scale:1; } }
@keyframes application-idea { 0%,100% { translate:0 0; } 50% { translate:-3px -17px; } }
@keyframes automation-relay { 0%,64%,100% { translate:0 0; } 22%,38% { translate:9px -9px; } }
@keyframes automation-signal { 0%,12%,70%,100% { opacity:0; translate:-16px -12px; } 24% { opacity:1; translate:-16px -6px; } 42% { opacity:1; translate:0 0; } 56% { opacity:0; translate:0 0; } }
@keyframes automation-request { 0%,100% { translate:0 0; } 28% { translate:14px -9px; } 65% { translate:0 -3px; } }
@keyframes automation-result { 0%,24%,100% { translate:0 0; } 65% { translate:-3px -16px; } }
@keyframes work-paper { 0%,100% { translate:0 0; rotate:0deg; } 50% { translate:0 -5px; rotate:-1deg; } }
@keyframes work-pages { 0%,100% { transform:rotate(-4deg); } 50% { transform:rotate(-7deg) translate(-2px,2px); } }
@keyframes work-outline { 0%,100% { opacity:.4; translate:13px 0; } 20%,84% { opacity:1; translate:0 0; } }
@keyframes work-highlight { 0%,18%,100% { background-size:0 100%; } 35%,84% { background-size:100% 100%; } }
@keyframes work-finish { 0%,25%,100% { translate:0 0; } 65% { translate:6px -13px; } }

@keyframes flow-breathe { 0%,100% { box-shadow:0 0 0 4px #839b7115; } 50% { box-shadow:0 0 0 7px #839b7108; } }
@keyframes flow-confirm { 0%,15%,100% { opacity:.35; } 30%,85% { opacity:1; } }
@media (max-width:1160px) and (min-width:901px) {
  .hero-visual .scene-stage { height:680px; }
  .scene-example .scene-note { top:133px; }
  .scene-example .scene-note strong { font-size:20px; }
  .hero-visual .automation-window { top:253px; width:325px; right:0; }
  [data-scene-panel="automation"] .scene-published { top:192px; }
  .hero-visual .work-window { top:253px; width:320px; right:10px; }
  [data-scene-panel="travail"] .scene-published { top:205px; }
  .task-flow { margin-top:12px; }
  .flow-step { padding:7px 9px; }
  .document-line { padding:9px 0; }
}
@media (max-width:900px) and (min-width:651px) {
  .hero-visual .scene-stage { height:680px; }
  .scene-example .scene-note { top:145px; }
}
@media (max-width:650px) {
  .hero-visual .scene-stage { height:530px; }
  .scene-example .scene-note { top:105px; left:8px; }
  .scene-example .scene-note strong { font-size:18px; }
  .scene-example .scene-note-tag { font-size:7px; padding:4px 5px; }
  .scene-published>span svg { width:16px; height:16px; }
  .hero-visual .automation-window { width:290px; top:218px; right:1px; transform:perspective(1000px) rotateY(-4deg) rotateZ(-2deg); }
  .hero-visual .automation-window .project-heading { margin-left:7px; padding:7px 9px; }
  .hero-visual .automation-window .project-heading h2 { font-size:17px; }
  [data-scene-panel="automation"] .scene-published { top:169px; right:5px; }
  .hero-visual .work-window { width:273px; top:202px; right:6px; transform:perspective(1000px) rotateX(2deg) rotateY(-4deg) rotateZ(2deg); }
  .hero-visual .work-window .window-bar { margin-inline:14px; height:25px; }
  .hero-visual .work-window .project-content { padding:11px 15px 9px; }
  .hero-visual .work-window .project-heading h2 { font-size:17px; }
  [data-scene-panel="travail"] .scene-published { top:166px; right:6px; }
  .flow-live { width:20px; height:20px; }
  .flow-live i { width:5px; height:5px; }
  .task-flow { margin-top:10px; }
  .flow-step { gap:8px; width:calc(100% - 34px); min-height:42px; padding:7px 8px; border-radius:8px; }
  .flow-step:nth-child(2) { margin-left:15px; }
  .flow-step:nth-child(3) { margin-left:30px; }
  .flow-step+.flow-step { margin-top:16px; }
  .flow-step+.flow-step::before { left:15px; height:14px; width:18px; transform:translateX(-15px); }
  .flow-step+.flow-step::after { left:11px; top:-9px; width:5px; height:5px; }
  .flow-icon { width:23px; height:23px; border-radius:6px; }
  .flow-icon svg { width:15px; height:15px; }
  .flow-step strong { font-size:9px; }
  .flow-step small { font-size:7px; }
  .flow-check { font-size:10px; }
  .work-document { margin-top:10px; }
  .document-mark { width:23px; height:25px; font-size:13px; }
  .document-line { gap:9px; padding:5px 0; }
  .document-line>span { font-size:7px; }
  .document-line strong { font-size:12px; }
  .document-line p { font-size:7px; margin-top:2px; }
  .document-foot { margin-top:8px; font-size:7px; }
}
@media (prefers-reduced-motion:reduce) {
  .scene-example { transition:none; transform:none; }
}