/* MOTION BLUEPRINT — original interaction design for Friendz And Trendz.
   PSEUDOCODE: Keep motion in this file so DJ can tune it without changing the base layout. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); --reveal-distance: 28px; }

/* PSEUDOCODE: Show reading progress and provide a keyboard-accessible motion switch. */
.reading-progress { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 3px; background: #9566cf; transform: scaleX(var(--read-progress, 0)); transform-origin: left; pointer-events: none; }
.motion-control { position: fixed; bottom: 18px; right: 18px; z-index: 30; border: 1px solid #80698f; background: var(--surface); color: var(--ink); border-radius: 40px; padding: 8px 15px; font-size: 11px; box-shadow: 0 3px 15px #24162f15; }

/* PSEUDOCODE: Reveal each section only once as it enters the screen.
   If JavaScript is unavailable, content is simply visible. */
.motion-ready [data-reveal] { transition: opacity .8s var(--motion-ease), transform .8s var(--motion-ease); }
.motion-ready [data-reveal]:not(.is-revealed) { opacity: 0; transform: translateY(var(--reveal-distance)); }
.motion-ready [data-reveal].is-revealed { opacity: 1; transform: none; }
.motion-ready .hero-copy > * { animation: introduction .85s var(--motion-ease) both; }
.motion-ready .hero-copy h1 { animation-delay: .08s; }
.motion-ready .hero-copy .lede { animation-delay: .16s; }
.motion-ready .hero-copy .actions { animation-delay: .24s; }
.motion-ready .hero-copy .price-note { animation-delay: .32s; }
.motion-ready .mini-browser { animation: assemble 1.25s var(--motion-ease) both; }
.motion-ready .art-stamp { animation: stamp-in 1s .35s var(--motion-ease) both; }
@keyframes introduction { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: none; } }
@keyframes assemble { from { opacity: 0; transform: translateY(90px) rotate(7deg) scale(.82); } to { opacity: 1; transform: rotate(-6deg); } }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-30deg) scale(.6); } to { opacity: 1; transform: rotate(12deg) scale(1); } }
.button span, .text-link span { display: inline-block; transition: transform .35s var(--motion-ease); }
.button:hover span, .text-link:hover span { transform: translate(3px, -3px); }
.service-grid article { transition: background .4s, transform .4s var(--motion-ease); }
@media (hover:hover) { .service-grid article:hover { background: #241e30; transform: translateY(-5px); } }

/* PSEUDOCODE: Use a dark, spacious scene to connect the three marketing services. */
.journey { background: var(--plum); color: var(--paper); padding: 100px 0 0; position: relative; }
.journey-heading { padding-bottom: 70px; }
.journey-heading h2 { font-size: clamp(2.4rem, 4.5vw, 4.8rem); }
.journey-heading em { color: var(--lavender); }
.journey-heading > p:not(.eyebrow) { color: #d1c4dc; font-size: 16px; }
.journey-grid { display: grid; grid-template-columns: 1fr 1.22fr; gap: 65px; align-items: start; }
.journey-copy { grid-column: 1; grid-row: 1; }
.journey-step { min-height: 72vh; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; padding: 70px 0; scroll-margin-top: 170px; }
.journey-step:last-child { min-height: 85vh; }
.journey-number { font-size: 10px; letter-spacing: .13em; color: var(--lavender); margin-bottom: 25px; }
.journey-step h3 { font-size: clamp(2rem, 3.25vw, 3.5rem); }
.journey-step p { font-size: 15px; color: #d1c4dc; max-width: 390px; }
.journey-step .text-link { margin-top: 12px; }

/* PSEUDOCODE: Pin one illustration beside the text; never take over the visitor's scrolling. */
.journey-stage { grid-column: 2; grid-row: 1; position: sticky; top: 150px; height: 520px; overflow: hidden; border: 1px solid #655075; border-radius: 10px; background: #17101f; isolation: isolate; }
.scene-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(#79608e 1px,transparent 1px),linear-gradient(90deg,#79608e 1px,transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse,#000,transparent 75%); }
.scene-halo { position: absolute; width: 390px; height: 390px; border: 1px solid #9876b7; border-radius: 50%; top: 60px; left: 18%; opacity: .45; transition: transform 1s var(--motion-ease), border-radius 1s var(--motion-ease); }
.scene-topline, .scene-bottom { position: absolute; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 8px; letter-spacing: .12em; color: #e4d8ef; z-index: 2; }
.scene-topline { top: 25px; gap: 12px; }.scene-bottom { bottom: 26px; gap: 18px; }
.scene-shell { position: absolute; top: 95px; left: 8%; width: 84%; height: 320px; border-radius: 7px; background: #21182e; color: var(--ink); box-shadow: 0 25px 55px #12091b70; transform: rotate(-3deg); transition: transform 1s var(--motion-ease), border-radius 1s var(--motion-ease); }
.scene-chrome { height: 35px; padding: 10px 15px; display: flex; justify-content: space-between; font-size: 7px; border-bottom: 1px solid var(--line); }
.scene-panel { position: absolute; top: 35px; inset-inline: 0; bottom: 0; padding: 26px 22px; transition: opacity .55s, transform .8s var(--motion-ease), visibility .55s; }
.scene-search, .scene-connect { opacity: 0; visibility: hidden; transform: translateY(35px) scale(.94); }
.mock-tag { font-size: 6px; letter-spacing: .13em; display: block; margin-bottom: 18px; }
.build-layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 15px; }
.scene-panel h3 { font-size: 26px; letter-spacing: -.045em; line-height: 1.15; margin-bottom: 18px; }
.mock-line { height: 4px; width: 90%; background: #73578f; margin-top: 6px; }.mock-line.short { width: 65%; }
.mock-cta { background: var(--lavender); display: inline-block; font-size: 6px; padding: 10px 12px; margin-top: 17px; }
.build-sculpture { border-radius: 60px 60px 0 0; background: #39274f; position: relative; overflow: hidden; display: grid; place-items: center; }
.build-sculpture > div { position: absolute; width: 145px; height: 145px; border: 25px solid #9f7ac7; border-radius: 50%; transform: rotate(-30deg); }
.build-sculpture > span { font-size: 30px; font-family: Georgia,serif; font-style: italic; z-index: 1; }
.build-tiles { display: flex; justify-content: space-between; margin-top: 23px; padding-top: 14px; border-top: 1px solid #d2c3df; font-size: 6px; }
.mock-search { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #bc9fd6; border-radius: 30px; font-size: 9px; padding: 13px; margin-bottom: 25px; }.mock-search > span { font-size: 19px; }
.search-result { display: flex; gap: 13px; align-items: flex-start; }.result-mark { border-radius: 50%; background: var(--lavender); padding: 10px 8px; font: italic 15px Georgia; white-space: nowrap; }
.search-result small { font-size: 6px; letter-spacing: .1em; }.search-result h3 { font-size: 19px; margin: 7px 0; }
.search-tags { display: flex; gap: 6px; margin-top: 20px; flex-wrap: wrap; }.search-tags span { font-size: 6px; padding: 5px 8px; background: #39274f; border-radius: 20px; }
.concept-note { display: block; font-size: 7px; color: #b6aec7; margin-top: 18px; }
.scene-connect { text-align: center; padding-top: 18px; }.scene-connect .mock-tag { margin-bottom: 8px; }
.connection-symbol { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lavender); font-size: 26px; margin-bottom: 12px; }
.message-bubble { font-size: 11px; background: #39274f; width: fit-content; padding: 8px 13px; margin: 0 auto 15px; border-radius: 10px 10px 10px 0; }
.scene-connect h3 { margin-bottom: 14px; }.connection-channels { display: flex; justify-content: center; gap: 20px; font-size: 6px; letter-spacing: .12em; }
.scene-connect .concept-note { margin-top: 12px; }
.scene-track { width: 90px; height: 2px; background: #645072; }.scene-track span { display: block; height: 100%; width: 33.333%; background: var(--lavender); transition: width .8s var(--motion-ease); }

/* PSEUDOCODE: Change the one scene from a website, to discovery, to a conversation. */
[data-scene="1"] .scene-shell { transform: rotate(0deg); border-radius: 16px; }
[data-scene="2"] .scene-shell { transform: rotate(3deg); border-radius: 26px; }
[data-scene="1"] .scene-halo { transform: scale(1.2) rotate(60deg); border-radius: 30%; }
[data-scene="2"] .scene-halo { transform: scale(.9) rotate(140deg); border-radius: 15%; }
[data-scene="1"] .scene-build, [data-scene="2"] .scene-build { opacity: 0; visibility: hidden; transform: translateY(-25px) scale(.94); }
[data-scene="1"] .scene-search, [data-scene="2"] .scene-connect { opacity: 1; visibility: visible; transform: none; }
[data-scene="1"] .scene-track span { width: 66.666%; } [data-scene="2"] .scene-track span { width: 100%; }

/* PSEUDOCODE: Use a compact sticky scene above the story on phones and tablets. */
@media (max-width: 900px) {
  .journey { padding-top: 65px; }.journey-heading { padding-bottom: 40px; }
  .journey-grid { display: block; }.journey-stage { top: 102px; height: 360px; max-width: 600px; margin: 0 auto; z-index: 2; box-shadow: 0 15px 25px #24162f; }
  .scene-shell { top: 48px; height: 270px; width: 80%; left: 10%; }.scene-topline { top: 15px; }.scene-bottom { bottom: 13px; }
  .scene-panel { padding: 18px; }.scene-panel h3 { font-size: 23px; }.scene-chrome { height: 28px; padding: 7px 12px; }.scene-panel { top: 28px; }
  .mock-tag { margin-bottom: 12px; }.build-tiles { margin-top: 15px; padding-top: 10px; }.scene-connect { padding-top: 11px; }.scene-connect h3 { font-size: 22px; margin-bottom: 10px; }.connection-symbol { width: 32px; height: 32px; font-size: 23px; margin-bottom: 8px; }.message-bubble { margin-bottom: 10px; }
  .journey-step { min-height: 65vh; padding: 60px 0; max-width: 600px; margin: 0 auto; scroll-margin-top: 490px; }.journey-step:last-child { min-height: 70vh; }.journey-step h3 { font-size: 36px; }
  .mock-search { margin-bottom: 15px; }.concept-note { margin-top: 12px; }.search-tags { margin-top: 14px; }
}
@media (max-width: 600px) {
  .journey-stage { height: 300px; top: 99px; }.scene-shell { top: 47px; left: 6%; width: 88%; height: 215px; }.scene-topline,.scene-bottom { left: 16px; right: 16px; font-size: 6px; }.scene-track { width: 50px; }
  .scene-panel { padding: 13px; }.mock-tag { font-size: 5px; margin-bottom: 9px; }.scene-panel h3 { font-size: 19px; margin-bottom: 12px; }.mock-cta { padding: 7px 9px; font-size: 5px; margin-top: 9px; }.build-tiles { margin-top: 12px; padding-top: 8px; font-size: 5px; }.build-sculpture > div { width: 100px; height: 100px; border-width: 18px; }.build-sculpture > span { font-size: 25px; }
  .mock-search { font-size: 6px; padding: 7px; margin-bottom: 12px; }.mock-search > span { font-size: 15px; }.search-result { gap: 8px; }.result-mark { padding: 7px 5px; font-size: 12px; }.search-result h3 { font-size: 14px; margin: 5px 0; }.search-result small { font-size: 5px; }.search-tags { margin-top: 11px; gap: 3px; }.search-tags span { font-size: 5px; padding: 4px; }.concept-note { font-size: 5px; margin-top: 9px; }
  .scene-connect { padding-top: 10px; }.scene-connect h3 { font-size: 20px; margin-bottom: 10px; }.scene-connect .mock-tag { margin-bottom: 6px; }.connection-symbol { width: 25px; height: 25px; font-size: 18px; margin-bottom: 5px; }.message-bubble { font-size: 8px; padding: 5px 8px; margin-bottom: 8px; }.connection-channels { font-size: 5px; }.scene-connect .concept-note { margin-top: 8px; }
  .journey-step { min-height: 65vh; scroll-margin-top: 425px; }.journey-step h3 { font-size: 31px; }.journey-step p { font-size: 14px; }.motion-control { bottom: 10px; right: 10px; font-size: 10px; padding: 8px 12px; }
}

/* PSEUDOCODE: Keep all content visible when motion is disabled by the visitor or OS. */
html[data-motion="paused"] { scroll-behavior: auto; }
html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after { animation: none!important; transition: none!important; }
html[data-motion="paused"] [data-reveal] { opacity: 1!important; transform: none!important; }
html[data-motion="paused"] .reading-progress { display: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] { opacity: 1!important; transform: none!important; }
  .reading-progress { display: none; }
}

/* PSEUDOCODE: Keep story text close beneath the pinned scene on small screens. */
@media (max-width: 900px) {
  .journey-step { justify-content: flex-start; min-height: 58vh; padding: 42px 0 90px; }
}
@media (max-width: 600px) {
  .journey-step { scroll-margin-top: 300px; }
}
/* PSEUDOCODE: Short landscape screens need reading space more than a pinned illustration. */
@media (max-width: 900px) and (max-height: 650px) {
  .journey-stage { position: relative; top: 0; }
  .journey-step { min-height: auto; scroll-margin-top: 100px; }
}


/* PSEUDOCODE: Give every page the same timing language. New transitions run once;
   hovering creates feedback, not a loop or a delay before navigation. */
:root { --motion-fast: 220ms; --motion-medium: 650ms; --motion-slow: 950ms; }
.reading-progress { background: linear-gradient(90deg, var(--purple), var(--lavender)); box-shadow: 0 0 12px #b79af788; }
.motion-control { border-color: #70558e; box-shadow: 0 6px 25px #0007; min-height: 36px; }
.motion-control:disabled { cursor: default; opacity: 1; }
.header nav a::after { transition: transform var(--motion-fast) var(--motion-ease); }
.header nav a:hover::after, .header nav a:focus-visible::after { transform: scaleX(1); }
.header-cta, .button, .copy-button, input, select, textarea { transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); }
.header-cta:hover, .header-cta:focus-visible { background: #2c203c; border-color: var(--lavender); }
.button:hover, .button:focus-visible { box-shadow: 0 8px 30px #b79af724; }
.motion-ready .page-intro > * { animation: introduction var(--motion-medium) var(--motion-ease) both; }
.motion-ready .page-intro h1 { animation-delay: 70ms; }
.motion-ready .page-intro .lede { animation-delay: 140ms; }
.motion-ready [data-reveal] { transition-delay: var(--reveal-delay, 0ms); }
.motion-ready [data-reveal]:focus-within { opacity: 1; transform: none; transition-delay: 0ms; }
.service-grid article, .candidate-grid article, .own-site-art, .values article { position: relative; transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-medium) var(--motion-ease), opacity var(--motion-medium) var(--motion-ease); }
@media (hover: hover) {
  .service-grid article:hover, .candidate-grid article:hover { background: #241c30; border-color: #a280ce; box-shadow: 0 12px 35px #0005, inset 0 1px #b79af733; transform: translateY(-5px); }
  .own-site-art:hover { transform: perspective(1000px) rotateY(-3deg) rotateX(2deg); border-color: var(--lavender); }
}
.service-grid article:focus-within { border-color: var(--lavender); box-shadow: 0 0 0 1px var(--lavender); }
.hero-art::after, .journey-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 70px #b79af712; }
.journey { background: radial-gradient(ellipse at 80% 40%, #7c4dcc14, transparent 60%), #100c16; color: var(--ink); border-block: 1px solid var(--line); }
.journey-stage { border-color: #6f528a; box-shadow: 0 22px 60px #0006; background: radial-gradient(ellipse at 80% 0, #7c4dcc4a, transparent 75%), #17101f; }
.scene-shell { border: 1px solid #806098; box-shadow: 0 30px 60px #0008, 0 0 35px #b79af71a; }
.scene-halo { border-color: #9670c0; box-shadow: 0 0 45px #9566cf18; }
.scene-chrome, .scene-topline, .scene-bottom { color: var(--muted); }
.mock-cta, .connection-symbol, .result-mark { color: #160e23; }
.mock-cta { border-radius: 4px; }
.build-tiles { border-color: var(--line); }
.build-sculpture > span { color: var(--ink); }
[data-scene="1"] .scene-shell { box-shadow: 0 25px 60px #0008, 0 0 40px #b79af72a; }
[data-scene="2"] .scene-shell { box-shadow: 0 25px 60px #0008, 0 0 60px #b79af735; }

/* PSEUDOCODE: Assemble service parts only after their figure enters the viewport.
   Without JS, the final illustration is already visible. We never animate real data. */
.motion-ready .service-demo.is-revealed .demo-piece { animation: component-arrive var(--motion-slow) var(--motion-ease) both; animation-delay: var(--piece-delay, 0ms); }
@keyframes component-arrive { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.motion-ready .demo-build.is-revealed .accent { animation-name: tile-assemble; }
@keyframes tile-assemble { from { opacity: 0; transform: translateX(18px) rotate(7deg); } to { opacity: 1; transform: none; } }
.motion-ready .demo-search.is-revealed .demo-result:last-child { animation-name: search-clarify; }
@keyframes search-clarify { from { opacity: .2; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.motion-ready .studio-story.is-revealed .ridge path { stroke-dasharray: 1250; animation: trace-roots 1.3s var(--motion-ease) both; }
@keyframes trace-roots { from { stroke-dashoffset: 1250; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
.motion-ready .story-path li.is-revealed .story-symbol { animation: component-arrive var(--motion-medium) var(--motion-ease) both; }
.email-preview:not([hidden]) { animation: introduction var(--motion-medium) var(--motion-ease) both; }

/* PSEUDOCODE: A visitor's Pause or OS reduced-motion choice wins over every effect.
   Final content stays visible; decorative scene changes happen instantly. */
html[data-motion="paused"] [data-reveal] { opacity: 1!important; transform: none!important; }
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal], .motion-ready .page-intro > *, .motion-ready .hero-copy > *, .motion-ready .demo-piece { opacity: 1!important; transform: none!important; }
  *, *::before, *::after { animation: none!important; transition: none!important; }
}

/* PSEUDOCODE: Let card hover feedback win over the completed scroll-reveal transform. */
@media (hover: hover) {
  .motion-ready .service-grid article.is-revealed:hover,
  .motion-ready .candidate-grid article.is-revealed:hover { transform: translateY(-5px); }
  .motion-ready .own-site-art.is-revealed:hover { transform: perspective(1000px) rotateY(-3deg) rotateX(2deg); }
}

/* CINEMATIC STUDIO — original HTML/CSS scenes, with no video or external library.
   PSEUDOCODE: Keep readable steps beside one sticky illustration. Native scrolling
   selects the chapter; desktop gets perspective, phones get a simpler flat view. */
:root { --studio-height: 570px; --studio-border: #66507f; --studio-soft: #b6aec7; }
.service-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.service-jump a { padding: 10px 16px; border: 1px solid var(--line); border-radius: 30px; font-size: 12px; text-decoration: none; color: var(--lavender); }
.service-jump a:hover, .service-jump a:focus-visible { border-color: var(--lavender); background: var(--surface); }
.service-section { position: relative; padding: 50px 0 60px; border-top: 1px solid var(--line); scroll-margin-top: 115px; }
.anchor-alias { position: absolute; top: 0; scroll-margin-top: 120px; }
.service-overview { display: grid; grid-template-columns: .5fr 1.4fr 1fr; gap: 45px; }
.service-overview h2 { font-size: 35px; }
.service-overview p { color: var(--muted); font-size: 15px; }
.service-overview .price-card .price { color: var(--ink); font-size: 70px; }
.service-overview .price-card .eyebrow { color: var(--lavender); font-size: 9px; }
.experience { margin-top: 65px; }
.experience-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 48px; align-items: start; }
.experience-steps { grid-column: 1; grid-row: 1; }
.experience-step { min-height: clamp(300px, 49vh, 460px); display: flex; flex-direction: column; justify-content: center; padding: 40px 0; scroll-margin-top: 140px; }
.experience-step:last-child { padding-bottom: 90px; }
.experience-step h3 { font-size: clamp(1.7rem, 2.4vw, 2.5rem); }
.experience-step p:not(.eyebrow) { font-size: 15px; color: var(--muted); max-width: 390px; }
.experience-step .eyebrow { font-size: 9px; margin-bottom: 20px; }
.experience-stage { grid-column: 2; grid-row: 1; position: sticky; top: 125px; margin: 0; min-width: 0; overflow: hidden; border: 1px solid var(--studio-border); background: #110d18; border-radius: 14px; box-shadow: 0 20px 65px #0006; }
.experience-stage figcaption { padding: 18px 22px; min-height: 100px; border-top: 1px solid var(--line); background: #17111f; }
.experience-phase { display: block; font-size: 9px; letter-spacing: .12em; color: var(--lavender); margin-bottom: 7px; }
.experience-stage figcaption p { margin: 0; font-size: 11px; line-height: 1.6; color: var(--muted); }
.experience-outro { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.experience-outro p { font-size: 20px; margin: 0; max-width: 520px; }
.prototype-layout-toggle { margin-top: 14px; padding: 9px 12px; min-height: 40px; color: var(--ink); background: #2b203a; border: 1px solid #9476b5; border-radius: 6px; font-size: 11px; }
.prototype-layout-toggle:hover, .prototype-layout-toggle[aria-pressed="true"] { background: #3e2b56; border-color: var(--lavender); }

/* PSEUDOCODE: A blank design canvas receives guides, type, color, and finally a
   compact layout. All four states reuse the same DOM instead of swapping videos. */
.design-visual { height: 420px; overflow: hidden; position: relative; background: radial-gradient(ellipse at 75% 30%, #7c4dcc26, transparent 65%), #100c16; }
.design-tools { position: absolute; top: 20px; left: 22px; right: 22px; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .1em; color: var(--muted); }
.alignment-grid { position: absolute; inset: 58px 20px 45px; background: repeating-linear-gradient(90deg, transparent 0 14%, #b79af72e 14% 14.2%, transparent 14.2% 16.66%), repeating-linear-gradient(0deg, transparent 0 48px, #b79af72e 48px 49px); transform: perspective(700px) rotateX(8deg); transition: opacity var(--motion-medium), transform var(--motion-medium); }
.floating-type { position: absolute; z-index: 1; left: 32px; top: 62px; font: italic 58px Georgia, serif; color: var(--lavender); transition: transform var(--motion-medium), opacity var(--motion-medium); }
.floating-type span { display: block; font: 9px Arial, sans-serif; color: var(--muted); }
.palette { position: absolute; z-index: 3; right: 28px; top: 70px; display: flex; gap: 6px; transition: transform var(--motion-medium), opacity var(--motion-medium); }
.palette i { width: 22px; height: 22px; background: var(--lavender); border: 1px solid #ae91d4; border-radius: 50%; }
.palette i:nth-child(2) { background: #7c4dcc; }.palette i:nth-child(3) { background: #191620; }
.design-canvas { position: absolute; width: 76%; height: 255px; left: 12%; top: 120px; padding: 18px; border: 1px solid #70558e; border-radius: 6px; background: #21182e; box-shadow: 15px 18px 35px #0005; transform: rotate(-3deg); transition: width var(--motion-slow) var(--motion-ease), left var(--motion-slow) var(--motion-ease), transform var(--motion-medium), background var(--motion-medium); }
.canvas-header { font-size: 13px; font-weight: 700; border-bottom: 1px solid #604973; padding-bottom: 10px; }.canvas-header > span { color: var(--lavender); font: italic 15px Georgia; }.canvas-header > i { float: right; color: var(--lavender); }
.canvas-hero { padding-top: 17px; }.canvas-hero > span { font-size: 6px; letter-spacing: .1em; color: var(--muted); }.canvas-hero p { font-size: 28px; line-height: 1.1; margin: 9px 0; }.canvas-hero em { color: var(--lavender); }.canvas-line { width: 64%; height: 2px; background: #80659e; }.canvas-button { margin-top: 14px; width: fit-content; padding: 6px 10px; border-radius: 4px; font-size: 7px; background: var(--lavender); color: #160e23; }
.canvas-cards { display: flex; gap: 8px; position: absolute; right: 20px; top: 81px; width: 33%; flex-direction: column; }.canvas-cards i { font-size: 7px; font-style: normal; padding: 9px; border: 1px solid #70558e; background: #3c2853; }
.design-guides { position: absolute; inset: auto 22px 15px; display: flex; justify-content: space-between; color: var(--muted); font-size: 7px; letter-spacing: .1em; }
[data-experience="design"] [data-scene="0"] .design-canvas { background: transparent; transform: scale(.9); }
[data-experience="design"] [data-scene="0"] .design-canvas > * { opacity: .1; }
[data-experience="design"] [data-scene="0"] .floating-type, [data-experience="design"] [data-scene="0"] .palette { opacity: 0; transform: translateY(-15px); }
[data-experience="design"] [data-scene="1"] .canvas-cards, [data-experience="design"] [data-scene="1"] .canvas-button { opacity: .15; }
[data-experience="design"] [data-scene="2"] .design-canvas { transform: rotate(0deg); }
[data-experience="design"] [data-scene="3"] .design-canvas { width: 192px; left: calc(50% - 96px); transform: none; border-radius: 15px; }
[data-experience="design"] [data-scene="3"] .alignment-grid { opacity: .2; transform: none; }
[data-experience="design"] [data-scene="3"] .floating-type { transform: translateY(8px) scale(.7); transform-origin: left; }
[data-experience="design"] [data-scene="3"] .palette { transform: translateY(15px); }
[data-experience="design"] [data-scene="3"] .canvas-cards { position: static; flex-direction: row; margin-top: 13px; width: 100%; gap: 4px; }.design-stage[data-scene="3"] .canvas-cards i { padding: 5px; font-size: 6px; flex: 1; }

/* PSEUDOCODE: The camera illusion is one monitor that approaches, loses its bezel,
   opens the code editor, and lets the rendered preview grow into the same space. */
.development-visual { height: 460px; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 50% 50%, #7c4dcc29, transparent 70%), #0b0910; }
.studio-light { position: absolute; inset: 8% 12%; border: 1px solid #7c4dcc55; box-shadow: 0 0 70px #7c4dcc22, inset 0 0 80px #7c4dcc15; border-radius: 45%; transform: scale(var(--light-scale, 1)); }
.code-reflection { position: absolute; left: 5%; top: 6%; font: 11px/1.7 monospace; color: #b79af74d; transform: translateY(calc(var(--studio-progress, 1) * -20px)); }
.computer { position: absolute; left: 4%; width: 92%; top: 38px; height: 348px; border: 9px solid #28232f; border-radius: 13px; background: #17111f; box-shadow: 0 25px 45px #000b, 0 0 0 1px #6d557f; transform: perspective(1100px) rotateX(var(--monitor-tilt, 0deg)) scale(var(--monitor-scale, 1)); transform-origin: 50% 46%; }
.computer-bezel { height: 21px; display: flex; align-items: center; justify-content: space-between; padding-inline: 10px; color: var(--muted); font-size: 6px; letter-spacing: .08em; }
.computer-screen { position: relative; height: calc(100% - 21px); background: #100c16; border: 1px solid #4c375e; overflow: hidden; border-radius: 4px; }
.workspace-bar { position: absolute; left: 0; top: 0; right: 0; display: flex; align-items: center; gap: 7px; height: 27px; padding: 8px; border-bottom: 1px solid #42314f; color: var(--muted); font: 7px monospace; }.workspace-bar span:last-child { margin-left: auto; color: var(--lavender); }.terminal-dot { width: 4px; height: 4px; background: #b79af7; border-radius: 50%; }
.source-editor { position: absolute; left: 10px; top: 40px; width: 57%; bottom: 15px; transition: opacity var(--motion-medium), transform var(--motion-medium); overflow: hidden; }
.code-file { margin-bottom: 7px; }.file-label { display: block; color: var(--lavender); font: 7px monospace; letter-spacing: .08em; margin-bottom: 3px; }.code-file pre { margin: 0; min-height: 37px; white-space: pre-wrap; overflow-wrap: anywhere; font: 8px/1.5 ui-monospace,Consolas,monospace; color: var(--ink); }.syntax-comment { color: #b5a5cb; }.syntax-tag { color: #c6a4ff; }.syntax-property { color: #e7b8ec; }
.terminal-status { font: 7px monospace; color: var(--muted); border-top: 1px solid var(--line); padding-top: 7px; }.terminal-cursor { color: var(--lavender); }
.monitor-led { position: absolute; left: 50%; bottom: -6px; width: 4px; height: 2px; background: #b79af7; box-shadow: 0 0 10px #b79af7; }.monitor-stand { position: absolute; width: 20%; height: 40px; background: linear-gradient(90deg, #17131d, #51415e, #17131d); left: 40%; bottom: -49px; clip-path: polygon(27% 0,73% 0,79% 80%,100% 90%,100% 100%,0 100%,0 90%,21% 80%); }
.development-bottom { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; justify-content: space-between; gap: 15px; color: var(--muted); font-size: 6px; letter-spacing: .08em; }.development-bottom > div { width: 70px; background: #352542; height: 3px; margin-top: 3px; }.development-bottom i { height: 100%; display: block; background: var(--lavender); transform: scaleX(var(--studio-progress,1)); transform-origin: left; }
.render-preview { position: absolute; right: 10px; top: 40px; width: 35%; height: 252px; background: #17121e; border: 1px solid #6b5183; border-radius: 5px; overflow: auto; scrollbar-width: thin; transition: width var(--motion-medium) var(--motion-ease), right var(--motion-medium) var(--motion-ease), transform var(--motion-medium), background var(--motion-medium); }
.prototype-chrome { display: flex; gap: 3px; align-items: center; height: 20px; border-bottom: 1px solid var(--line); padding: 7px; }.prototype-chrome i { width: 3px; height: 3px; border-radius: 50%; background: var(--lavender); }.prototype-chrome > span { font-size: 5px; color: var(--muted); margin-left: auto; }
.prototype-page { padding: 12px; }.prototype-header { font-size: 10px; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid var(--line); }.prototype-header > span:first-child { color: var(--lavender); font-family: Georgia; }.prototype-nav { font-weight: 400; font-size: 6px; display: block; margin-top: 6px; color: var(--muted); }.prototype-hero { padding: 17px 0 12px; }.prototype-hero small { color: var(--muted); font-size: 5px; letter-spacing: .1em; }.prototype-hero > p { font-size: 26px; line-height: 1.06; margin: 9px 0; letter-spacing: -.04em; }.prototype-hero > span { display: block; font-size: 7px; color: var(--muted); max-width: 240px; }.prototype-hero em { color: var(--lavender); }.prototype-cards { display: flex; gap: 5px; margin-bottom: 10px; }.prototype-cards > span { flex: 1; font-size: 6px; border: 1px solid #62467e; padding: 6px; border-radius: 4px; }
#example-cta { border: 1px solid #b79af7; border-radius: 4px; padding: 7px 10px; min-height: 36px; background: var(--lavender); color: #160e23; font-size: 10px; font-weight: 600; }#example-cta:disabled { cursor: default; opacity: .65; }.prototype-response { color: var(--muted); margin: 7px 0 0; font-size: 8px; line-height: 1.5; }
/* PSEUDOCODE: HTML first exposes structure, CSS adds the palette, JS enables the demo. */
.development-stage[data-build="0"] .prototype-page > * { opacity: .08; }
.development-stage[data-build="1"] .prototype-page { filter: grayscale(1); }
.development-stage[data-build="1"] .prototype-cards, .development-stage[data-build="1"] #example-cta { opacity: .2; }
.development-stage[data-build="2"] .prototype-page { background: linear-gradient(120deg, #22172e, #100c16); }
.development-stage[data-build="3"] .prototype-page { background: radial-gradient(ellipse at 100% 10%, #7c4dcc33, transparent 85%), #100c16; }
.development-stage[data-scene="0"] .source-editor { opacity: .25; }.development-stage[data-scene="0"] .render-preview { opacity: .2; }
.development-stage[data-scene="1"] .computer { border-color: #33273f; }.development-stage[data-scene="1"] .render-preview { opacity: .5; }
.development-stage[data-scene="2"] .computer { border-width: 3px; }.development-stage[data-scene="2"] .monitor-stand { opacity: .2; }
.development-stage[data-scene="3"] .computer, .development-stage[data-scene="4"] .computer { border-width: 2px; }
.development-stage[data-scene="3"] .source-editor, .development-stage[data-scene="4"] .source-editor { opacity: 0; transform: translateX(-30px); pointer-events: none; }
.development-stage[data-scene="3"] .render-preview, .development-stage[data-scene="4"] .render-preview { width: 88%; right: 6%; height: 260px; }
.development-stage[data-scene="3"] .monitor-stand, .development-stage[data-scene="4"] .monitor-stand { opacity: 0; }
.development-stage[data-scene="4"] .computer { transform: perspective(1100px) rotateY(-4deg) scale(.98); }
.development-stage[data-scene="3"] .prototype-hero > p, .development-stage[data-scene="4"] .prototype-hero > p { font-size: 34px; }
.development-stage[data-scene="3"] .prototype-nav, .development-stage[data-scene="4"] .prototype-nav { display: inline; float: right; }
.development-stage .render-preview.is-compact { width: 192px; max-width: 88%; right: calc(50% - 96px); }
.development-stage .render-preview.is-compact .prototype-nav { display: block; float: none; }
.development-stage .render-preview.is-compact .prototype-hero > p { font-size: 26px; }
.development-stage .render-preview.is-compact .prototype-cards { flex-direction: column; }

/* PSEUDOCODE: Add original connective details without replacing existing scenes. */
.journey-network { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; pointer-events: none; }.journey-network path { fill: none; stroke: #b79af7; stroke-width: 1; stroke-dasharray: 850; stroke-dashoffset: 550; transition: stroke-dashoffset 1s var(--motion-ease); }.journey-network circle { fill: var(--lavender); }
[data-scene="1"] .journey-network path { stroke-dashoffset: 280; }[data-scene="2"] .journey-network path { stroke-dashoffset: 0; }
.gallery-frame { min-width: 0; min-height: 430px; }.gallery-frame .own-site-art { min-height: 340px; margin-inline: auto; width: 100%; transition: width var(--motion-medium), border-radius var(--motion-medium), transform var(--motion-medium); }.gallery-frame .own-site-art.is-compact { width: min(230px,100%); padding: 30px 20px; border-radius: 22px; }.featured-work .own-site-art.is-compact p { font-size: 31px; }.gallery-frame .own-site-art.is-compact .browser-dots span { font-size: 7px; }.gallery-note { margin-top: 10px; }
.contact-convergence { height: 72px; position: relative; margin-bottom: 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; gap: 8px; }.contact-convergence > span { font-size: 8px; color: var(--lavender); border: 1px solid #70558e; border-radius: 30px; padding: 7px 10px; }.contact-convergence > b { font-size: 26px; color: var(--lavender); }
.motion-ready .form-panel.is-revealed .contact-convergence > span { animation: converge 1.2s var(--motion-ease) both; }
.contact-convergence > span:nth-child(2) { animation-delay: 80ms!important; }.contact-convergence > span:nth-child(3) { animation-delay: 160ms!important; }.contact-convergence > span:nth-child(4) { animation-delay: 240ms!important; }
@keyframes converge { from { opacity: 0; transform: translateX(-14px) scale(.8); } 65% { opacity: 1; transform: translateX(5px); } to { opacity: 1; transform: none; } }
.motion-ready .demo-search.is-revealed .demo-query { animation: query-form .8s var(--motion-ease) both; }
@keyframes query-form { from { opacity: .2; transform: scaleX(.85); } to { opacity: 1; transform: none; } }
.demo-ad .campaign-node + .campaign-node { position: relative; }.demo-ad .campaign-node + .campaign-node::before { content: ''; position: absolute; left: 20px; top: -11px; height: 10px; border-left: 1px solid var(--lavender); }

/* PSEUDOCODE: At narrow widths, flatten perspective and keep a small scene above
   the text. Short screens unpin it so contact and reading never feel trapped. */
@media (max-width: 1100px) { .experience-layout { gap: 30px; grid-template-columns: .7fr 1.3fr; }.service-overview { grid-template-columns: .4fr 1.3fr 1fr; gap: 28px; } }
@media (max-width: 900px) {
 .service-overview { grid-template-columns: 1fr 1fr; gap: 25px; }.service-overview > .detail-index { grid-column: 1/-1; }
 .experience-layout { display: flex; flex-direction: column; gap: 0; }.experience-stage { order: -1; width: 100%; top: 102px; z-index: 3; }.experience-steps { width: 100%; }
 .experience-step { min-height: 40vh; padding: 35px 0 45px; max-width: 600px; margin-inline: auto; }.experience-step h3 { font-size: 30px; }.experience-step:last-child { padding-bottom: 60px; }
 .design-visual { height: 290px; }.design-canvas { top: 63px; height: 207px; }.floating-type { top: 45px; font-size: 38px; left: 24px; }.floating-type span { display: none; }.palette { top: 45px; right: 22px; }.palette i { width: 16px; height: 16px; }.canvas-hero { padding-top: 9px; }.canvas-hero p { font-size: 24px; }.canvas-cards { top: 65px; }.design-guides { display: none; }
 .development-visual { height: 330px; }.computer { top: 25px; height: 263px; }.monitor-stand { height: 24px; bottom: -32px; }.development-bottom { bottom: 12px; }.source-editor { top: 30px; }.code-file pre { font-size: 7px; min-height: 26px; }.code-file { margin-bottom: 4px; }.file-label { font-size: 6px; }.terminal-status { font-size: 6px; }.render-preview { top: 32px; height: 195px!important; }.prototype-hero { padding: 10px 0 8px; }.prototype-hero > p { font-size: 21px!important; }.prototype-page { padding: 9px; }.prototype-header { font-size: 9px; padding-bottom: 7px; }.prototype-cards > span { padding: 4px; }.prototype-response { font-size: 7px; }
 .experience-stage figcaption { min-height: 82px; padding: 13px 16px; }.experience-stage figcaption p { font-size: 10px; }.prototype-layout-toggle { margin-top: 8px; padding: 7px 10px; min-height: 34px; }
 .experience-outro { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
 .service-section { padding-top: 35px; }.service-overview { grid-template-columns: 1fr; }.service-overview h2 { font-size: 31px; }.service-jump { margin-bottom: 25px; gap: 7px; }.service-jump a { padding: 9px 12px; font-size: 11px; }.experience { margin-top: 35px; }
 .experience-stage { top: 96px; }.experience-step { min-height: 42vh; }.experience-stage figcaption { padding: 11px 13px; }.experience-phase { font-size: 8px; }.experience-stage figcaption p { font-size: 9px; }
 .design-visual { height: 225px; }.design-tools { top: 12px; left: 14px; right: 14px; font-size: 6px; }.alignment-grid { inset: 35px 10px 15px; }.design-canvas { top: 50px; height: 160px; padding: 12px; }.canvas-header { font-size: 10px; padding-bottom: 6px; }.canvas-hero > span { font-size: 5px; }.canvas-hero p { font-size: 21px; margin: 6px 0; }.canvas-button { font-size: 5px; margin-top: 8px; padding: 4px 6px; }.canvas-cards { right: 10px; top: 51px; gap: 5px; }.canvas-cards i { font-size: 5px; padding: 6px; }.floating-type { left: 18px; top: 33px; font-size: 26px; }.palette { top: 32px; right: 16px; gap: 4px; }.palette i { width: 12px; height: 12px; }[data-experience="design"] [data-scene="3"] .design-canvas { width: 142px; left: calc(50% - 71px); }[data-experience="design"] [data-scene="3"] .canvas-cards { margin-top: 6px; } .design-stage[data-scene="3"] .canvas-cards i { padding: 3px; font-size: 5px; }
 .development-visual { height: 260px; }.computer { top: 22px; height: 207px; left: 3%; width: 94%; border-width: 4px; transform: none!important; }.computer-bezel { font-size: 4px; height: 15px; padding-inline: 5px; }.computer-screen { height: calc(100% - 15px); }.workspace-bar { height: 20px; font-size: 5px; padding: 5px; }.workspace-bar span:last-child { display: none; }.source-editor { top: 27px; left: 8px; width: calc(100% - 16px); bottom: 8px; }.code-file pre { font-size: 6px; min-height: 23px; }.code-file { margin-bottom: 4px; }.file-label { font-size: 5px; }.terminal-status { display: none; }.render-preview { top: 25px; right: 5%!important; width: 90%!important; height: 153px!important; }.prototype-chrome { height: 15px; padding: 4px; }.prototype-page { padding: 7px; }.prototype-header { font-size: 8px; }.prototype-nav { font-size: 5px; }.prototype-hero { padding: 6px 0; }.prototype-hero > p { font-size: 20px!important; margin: 4px 0; }.prototype-hero small { display: none; }.prototype-hero > span { font-size: 6px; }.prototype-cards { margin-bottom: 6px; gap: 4px; }.prototype-cards > span { font-size: 5px; padding: 3px; }#example-cta { font-size: 9px; min-height: 32px; padding: 5px 8px; }.prototype-response { font-size: 7px; }.development-stage[data-scene="0"] .source-editor, .development-stage[data-scene="1"] .source-editor { opacity: .3; }.development-stage[data-scene="0"] .render-preview, .development-stage[data-scene="1"] .render-preview, .development-stage[data-scene="2"] .render-preview { opacity: 0; pointer-events: none; }.development-bottom { font-size: 4px; bottom: 10px; left: 13px; right: 13px; }.development-bottom > div { width: 40px; }.monitor-stand { height: 15px; bottom: -21px; }.code-reflection { display: none; }.studio-light { transform: none!important; }
 .development-stage .render-preview.is-compact { width: 152px!important; right: calc(50% - 76px)!important; }.experience-stage figcaption .prototype-layout-toggle { font-size: 10px; min-height: 34px; }
 .contact-convergence { gap: 5px; }.contact-convergence > span { font-size: 6px; padding: 6px 7px; }
}
@media (max-height: 720px) { .experience-stage { position: relative; top: 0; }.experience-layout { display: flex; flex-direction: column; }.experience-stage { width: 100%; order: -1; }.experience-step { min-height: auto; padding: 32px 0; }.experience-steps { width: 100%; } }
/* PSEUDOCODE: Without animation, present the complete design and a working demo.
   A paused visitor never has to scroll to unlock meaningful information. */
html[data-motion="paused"] .computer { transform: none!important; }
html[data-motion="paused"] .studio-light, html[data-motion="paused"] .code-reflection { transform: none!important; }
@media (prefers-reduced-motion: reduce) { .computer, .studio-light, .code-reflection { transform: none!important; } }
/* PSEUDOCODE: Highlight the file currently being illustrated without blinking. */
.code-file.is-current .file-label { background: #3c2854; color: #eeeaf8; width: fit-content; padding-inline: 4px; }
.prototype-page > * { transition: opacity var(--motion-medium); }
/* PSEUDOCODE: Give the finished example room for its real button, without requiring
   a long nested scroll. The tiny in-progress preview remains decorative/inert. */
.development-stage[data-scene="3"] .computer, .development-stage[data-scene="4"] .computer { top: 28px; height: 380px; }
.development-stage[data-scene="3"] .render-preview, .development-stage[data-scene="4"] .render-preview { height: 294px; }
#example-cta { min-height: 44px; }
@media (min-width: 601px) and (max-width: 900px) {
 .development-stage[data-scene="3"] .computer, .development-stage[data-scene="4"] .computer { top: 15px; height: 282px; }
 .development-stage[data-scene="3"] .render-preview, .development-stage[data-scene="4"] .render-preview { height: 213px!important; top: 30px; }
 .prototype-hero > span { font-size: 6px; }
}
@media (max-width: 600px) {
 .development-stage[data-scene="3"] .computer, .development-stage[data-scene="4"] .computer { top: 18px; height: 224px; }
 .development-stage[data-scene="3"] .render-preview, .development-stage[data-scene="4"] .render-preview { height: 169px!important; }
 .development-stage[data-scene="3"] .prototype-cards, .development-stage[data-scene="4"] .prototype-cards { display: none; }
 .development-stage[data-scene="3"] .prototype-nav, .development-stage[data-scene="4"] .prototype-nav { display: none; }
 .development-stage[data-scene="3"] .prototype-hero > p, .development-stage[data-scene="4"] .prototype-hero > p { font-size: 18px!important; }
}
/* PSEUDOCODE: Type a clearly fictional search phrase once, not a real ranking. */
.demo-query .query-typing { font-size: 10px; display: inline-block; white-space: nowrap; }
.motion-ready .demo-search.is-revealed .query-typing { animation: query-type 1.5s steps(29,end) both; }
@keyframes query-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.development-service-link { margin-top: 15px; color: var(--lavender); font-size: 11px!important; }
@media (max-width: 370px) { .demo-query .query-typing { font-size: 8px; } }