/* Guilden — sage tones, translucent surfaces and purposeful motion. */
body {
  background: radial-gradient(ellipse at 0% 48%, #8181810b, transparent 34%), var(--bg);
}
.site-header { margin-bottom: -90px; background: transparent; backdrop-filter: none; transition: background .3s, border-color .3s; }
.site-header.is-scrolled { background: linear-gradient(110deg, #181818ed, #101010ed); border-color: var(--line); backdrop-filter: blur(20px); }
.brand img { filter: none; }
.site-nav>a:not(.nav-contact) { color: #e1e1e1; transition: color .2s; }
.site-nav>a:hover { color: #d9d9d9; }
.nav-contact { background: linear-gradient(125deg, #9a9a9a, #818181); border: var(--stroke) solid #d3d3d366; color: white; border-radius: 100px; }
.nav-contact:hover { color: white !important; box-shadow: 0 6px 30px #93939340; }
.btn--primary { background: linear-gradient(115deg, #979797 0%, #7d7d7d 100%); color: white; box-shadow: 0 6px 30px #93939335, inset 0 1px #ffffff1a; }
.btn--primary:hover { transform: translateY(-3px); background: linear-gradient(115deg, #a1a1a1, #939393); box-shadow: 0 10px 40px #a9a9a950; }
.btn span, .text-link span { transition: transform .25s; }
.btn:hover span, .text-link:hover span { transform: translate(3px,-2px); }

/* Immersive opening. The thumbnail images keep their original colors. */
.hero--immersive {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  justify-content: center; min-height: min(980px, max(850px, 100svh));
  padding: 160px 0 100px; overflow: hidden; background: var(--bg);
}
.hero__content { position: relative; z-index: 2; }
.hero__copy { max-width: 940px; }
.hero--immersive h1 { font-size: clamp(60px, 7vw, 98px); line-height: 1.06; font-weight: 700; letter-spacing: -.055em; text-shadow: 0 4px 45px #0003; }
.hero--immersive h1 .accent { color: #d6d6d6; background: linear-gradient(105deg, #e8e8e8 0%, #cbcbcb 55%, #c8c8c8 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero--immersive .eyebrow { color: #e7e7e7; margin-bottom: 28px; font-size: 14px; letter-spacing: .12em; }
.hero__lead { max-width: 610px; font-size: 20px; color: #e0e0e0; line-height: 1.75; margin-top: 30px; text-shadow: 0 2px 16px #0009; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
.hero__actions .text-link { min-height: 56px; border: var(--stroke) solid #d9d9d980; padding: 14px 24px; border-radius: 100px; background: linear-gradient(120deg, #44444455, #18181899); backdrop-filter: blur(12px); color: #f6f6f6; }
.hero__actions .text-link:hover { background: #6d6d6d55; }
.thumbnail-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.thumbnail-wall::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #101010ed 0%, #101010b8 38%, #10101030 100%), linear-gradient(0deg, #101010 0%, #101010d9 7%, #10101040 36%, #10101026 70%, #101010de 100%);
}
.thumbnail-wall__fallback { position: absolute; inset: 0; background: url('../assets/jeux/clean-all-the-bugs.webp') center / cover; opacity: .45; }
.thumbnail-wall.is-ready .thumbnail-wall__fallback { display: none; }
.thumbnail-wall__canvas { position: absolute; left: -400px; right: -400px; top: 50%; transform: translate3d(var(--wall-x, 0px), calc(-50% + var(--wall-y, 0px)), 0) rotate(-12deg); transition: transform .8s cubic-bezier(.2,.8,.2,1); opacity: .72; }
.thumbnail-row { margin-bottom: 18px; }
.thumbnail-track { display: flex; width: max-content; animation: thumbnail-drift var(--speed, 120s) linear infinite; will-change: transform; }
.thumbnail-row:nth-child(even) .thumbnail-track { animation-direction: reverse; }
.thumbnail-group { display: flex; flex: none; gap: 18px; padding-right: 18px; }
.thumbnail-tile { flex: none; width: clamp(240px, 25vw, 440px); aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; border: var(--stroke) solid #d9d9d966; background: #262626; box-shadow: 0 12px 30px #0005; }
.thumbnail-tile img { width: 100%; height: 100%; object-fit: cover; }
.hero__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 3% 45%, #93939321, transparent 52%), radial-gradient(ellipse at 100% 70%, #93939338, transparent 48%); }
.hero__footer {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3,1fr);
  align-items: center; gap: 32px; padding: 30px 36px; margin-top: 56px;
  border: var(--stroke) solid transparent; border-radius: 20px;
  background: linear-gradient(115deg, #282828e6, #181818d9) padding-box, linear-gradient(115deg, #c3c3c3a6, #a9a9a93b 50%, #d2d2d280) border-box;
  backdrop-filter: blur(24px); box-shadow: 0 20px 55px #0002;
}
.hero__manifesto { min-width: 0; padding-right: 24px; border-right: var(--stroke) solid #b4b4b466; }
.hero__manifesto:last-child { border-right: 0; padding-right: 0; }
.hero__manifesto>span { font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .12em; color: #d2d2d2; }
.hero__manifesto>p { font-family: var(--title-font); font-size: clamp(21px, 2vw, 26px); line-height: 1.35; letter-spacing: -.025em; margin-top: 10px; color: #f4f4f4; }
.hero__scroll { position: absolute; left: calc(50% - 22px); bottom: 24px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: var(--stroke) solid #d3d3d377; border-radius: 100%; color: #cccccc; background: #21212166; }
.hero__scroll span { animation: scroll-nudge 2.8s ease-in-out infinite; }

/* Subtle gradients connect the sections without decorative dividers. */
#games { padding-top: 72px; background: radial-gradient(ellipse at 95% 45%, #9393930c, transparent 60%); }
.game-preview { background: linear-gradient(125deg, #292929 0%, #191919 65%); box-shadow: 0 20px 70px #0002; }
.game-preview__copy { background: radial-gradient(ellipse at 100% 0%, #a9a9a917, transparent 65%); }
.studio-section { background: radial-gradient(ellipse at 0% 45%, #6e6e6e1c, transparent 60%), linear-gradient(180deg, #10101000, #1a1a1a99 25%, #1a1a1a99 75%, #10101000); }
.studio-art { max-width: 420px; aspect-ratio: 16/10; margin-top: 36px; overflow: hidden; border: var(--stroke) solid #c3c3c366; border-radius: 20px; box-shadow: 0 14px 55px #93939314; }
.studio-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 43%; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.studio-art:hover img { transform: scale(1.045); }
.offer { background: linear-gradient(140deg, #27272780, #14141466 70%); transition: transform .3s, border-color .3s, box-shadow .3s; }
.offer:hover { transform: translateY(-5px); border-color: #c3c3c399; box-shadow: 0 16px 45px #0003, inset 0 0 60px #a9a9a90a; }
.offer__icon { transition: transform .4s; }
.offer:hover .offer__icon { transform: translateX(5px) rotate(-6deg); }
.contact-section { position: relative; background: radial-gradient(ellipse at 85% 0%, #c5c5c566, transparent 62%), linear-gradient(120deg, #727272, #515151 65%, #323232); color: white; border-block: var(--stroke) solid #d1d1d155; }
.contact-layout h2 span { color: #dfdfdf; }
.contact-layout>div>p:last-child,.contact-card__note,.contact-card__hint { color: #ececec; }
.contact-handle { background: linear-gradient(110deg, #1a1a1a3d, #1a1a1a70); backdrop-filter: blur(12px); }
.contact-handle__copy { background: #f5f5f5; color: #595959; }
.contact-handle__copy:hover { background: white; }
.contact-section :focus-visible { outline-color: white; }
.contact-links .btn { background: #f7f7f7; color: #595959; box-shadow: none; }

/* Motion is decorative; content stays available without it. */
.reveal-ready { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal-ready.is-revealed,.reveal-ready:focus-within { opacity: 1; transform: none; }
.offer.is-revealed:hover { transform: translateY(-5px); }
.hero__copy>.eyebrow,.hero__copy>h1,.hero__copy>.hero__lead,.hero__copy>.hero__actions { animation: hero-enter .85s both cubic-bezier(.2,.8,.2,1); }
.hero__copy>h1 { animation-delay: .09s; }
.hero__copy>.hero__lead { animation-delay: .18s; }
.hero__copy>.hero__actions { animation-delay: .27s; }
.wall-is-idle .thumbnail-track { animation-play-state: paused; }
@keyframes thumbnail-drift { to { transform: translate3d(-50%,0,0); } }
@keyframes hero-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes scroll-nudge { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (max-width:1100px) {
  .hero--immersive { padding-top: 148px; min-height: 850px; }
  .hero__footer { padding: 28px; gap: 24px; }
  .hero__manifesto { padding-right: 20px; }
}
@media (max-width:900px) {
  .site-header { margin-bottom: -78px; }
  .js .site-nav { background: linear-gradient(120deg, #232323f5, #121212f5); backdrop-filter: blur(20px); }
  .hero--immersive h1 { font-size: clamp(58px, 8vw, 76px); }
  .hero__lead { max-width: 560px; font-size: 19px; }
  .hero__footer { gap: 20px; padding: 26px; }
  .hero__manifesto>span { font-size: 13px; letter-spacing: .07em; }
  .hero__manifesto>p { font-size: 21px; }
  .thumbnail-wall::after { background: linear-gradient(90deg, #101010e0, #10101070), linear-gradient(0deg, #101010, #1010100d 55%, #101010b3); }
  .studio-art { max-width: 520px; }
}
@media (max-width:620px) {
  .site-header { margin-bottom: -74px; }
  .hero--immersive { padding: 132px 0 94px; min-height: 0; }
  .hero--immersive h1 { font-size: clamp(42px, 10.6vw, 66px); letter-spacing: -.05em; }
  .hero--immersive .eyebrow { font-size: 13px; letter-spacing: .07em; margin-bottom: 24px; }
  .hero__lead { font-size: 18px; line-height: 1.75; margin-top: 26px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 28px; }
  .hero__actions .btn,.hero__actions .text-link { width: 100%; justify-content: center; min-height: 54px; font-size: 16px; padding: 14px 20px; }
  .hero__footer { grid-template-columns: 1fr; gap: 0; margin-top: 38px; padding: 6px 22px; border-radius: 18px; }
  .hero__manifesto { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 16px; padding: 20px 0; border-right: 0; border-bottom: var(--stroke) solid #b4b4b44d; }
  .hero__manifesto:last-child { border: 0; }
  .hero__manifesto>span { font-size: 13px; letter-spacing: .04em; }
  .hero__manifesto>p { font-size: 19px; line-height: 1.4; letter-spacing: -.02em; margin-top: 0; }
  .thumbnail-tile { width: 250px; border-radius: 10px; }
  .thumbnail-group { gap: 12px; padding-right: 12px; }
  .thumbnail-row { margin-bottom: 12px; }
  .thumbnail-wall__canvas { opacity: .78; }
  .thumbnail-wall::after { background: linear-gradient(90deg, #101010d9, #10101080), linear-gradient(0deg, #101010, #10101060 24%, #1010101a 60%, #101010bf); }
  .hero__glow { background: radial-gradient(ellipse at 0% 40%, #93939326, transparent 75%); }
  #games { padding-top: 56px; }
  .studio-art { max-width: none; aspect-ratio: 16/10; margin-top: 28px; }
}
@media (max-width:360px) {
  .hero__manifesto { grid-template-columns: 1fr; gap: 7px; padding-block: 18px; }
}
/* One continuous stage: the thumbnail becomes a full-bleed world behind the games. */
.world-journey { position: relative; isolation: isolate; }
.world-journey__runway { display: none; }
.world-portal { position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; overflow: hidden; transform-origin: center; pointer-events: none; background: #232323; }
.world-portal img { width: 100%; height: 100%; object-fit: cover; }
.journey-enabled .hero--immersive { position: sticky; top: var(--stage-top, 0px); min-height: max(850px, 100svh); }
.journey-enabled .world-journey__runway { display: block; height: var(--journey-travel, 115svh); pointer-events: none; }
.journey-enabled .thumbnail-wall__canvas { opacity: calc(.72 * var(--wall-opacity, 1)); }
.journey-enabled .thumbnail-wall::after { z-index: 2; opacity: var(--wall-mask, 1); }
.journey-enabled .hero__content,.journey-enabled .hero__footer,.journey-enabled .hero__scroll { opacity: var(--copy-opacity, 1); translate: 0 var(--copy-rise, 0px); }
.journey-enabled .hero__glow { background: radial-gradient(ellipse at 0% 45%, #93939326, transparent 65%); }
.journey-enabled .hero--immersive::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--world-shade, 0);
  background: linear-gradient(90deg, #1a1a1ab3, #20202055 70%), linear-gradient(0deg, #101010f2 0%, #1a1a1a90 45%, #12121266 100%);
}
.journey-enabled::after {
  content: ''; position: absolute; inset: auto 0 0; height: 280px; pointer-events: none; z-index: 1;
  background: linear-gradient(transparent, var(--bg));
}
.journey-enabled #vision { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 140px; background: none; }
.journey-enabled #vision .section-heading { text-shadow: 0 3px 24px #0d0d0dcc; }
.journey-enabled #vision .eyebrow { color: #dddddd; }
.journey-enabled #vision .muted { color: #dadada; }
.journey-enabled .game-preview { background: linear-gradient(125deg, #292929ed, #191919e6); backdrop-filter: blur(24px); border-color: #b5b5b580; box-shadow: 0 24px 80px #0a0a0a66; }
.journey-enabled .hero--immersive::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--bg); opacity: var(--world-end, 0); }
@media (max-width:620px) {
  .journey-enabled .hero--immersive { min-height: 100svh; }
  .journey-enabled #vision { padding-top: 56px; padding-bottom: 88px; }
}
@media (prefers-reduced-motion:reduce) {
  .world-portal { display: none; }
  .thumbnail-track,.hero__scroll span,.hero__copy>* { animation: none !important; }
  .thumbnail-wall__canvas { transform: translateY(-50%) rotate(-12deg) !important; transition: none; }
  .reveal-ready { opacity: 1; transform: none; transition: none; }
  .offer:hover,.offer.is-revealed:hover,.studio-art:hover img { transform: none; }
}
@media print {
  .journey-enabled .hero--immersive { position: relative; top: 0; min-height: 0; }
  .journey-enabled .world-journey__runway,.world-portal { display: none; }
  .journey-enabled .hero__content,.journey-enabled .hero__footer,.journey-enabled .hero__scroll { opacity: 1; translate: none; }
  .reveal-ready { opacity: 1; transform: none; }
}