.projects { padding-top: 86px; border-top: 0; }
.projects .section-heading { display: block; margin-bottom: 36px; }
.projects .section-heading .eyebrow { display: block; margin-bottom: 18px; color: var(--orange); }
.projects .section-heading h2 { font-size: clamp(42px,5.2vw,76px); line-height: .9; letter-spacing: -.035em; }
.projects .section-heading h2 span { color: var(--orange); }
.draft-note { margin: 0 0 44px; }
.project { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 28px 5%; padding: 42px 0 84px; margin: 0 0 38px; border-top: 1px solid var(--line); border-bottom: 0; }
.project .media { aspect-ratio: 16/8.2; align-self: center; border: 2px solid #ff7018; border-radius: 24px; overflow: hidden; background: #150b08; box-shadow: 0 0 7px #ff6000, 0 0 22px #ff5900cc, 0 0 44px #ff590066, inset 0 0 16px #ff590066; }
.project .media::after { display: none; }
.project .media video { opacity: 0; }
.project .media .media-poster,.project .media .media-frames { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.project .second-media { align-self: center; }
.project-portrait .portrait-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 390px; width: 100%; padding: 20px 0; align-self: center; background: radial-gradient(ellipse at center,#4a1b1038 0%,#170b0830 38%,transparent 70%); }
.project-portrait .portrait-gallery { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: center; gap: 14px; width: min(100%,560px); }
.project.project-portrait .portrait-gallery .media { grid-column: auto; grid-row: auto; }
.project.project-portrait .media.media-portrait { width: 100%; aspect-ratio: 9/20; border-radius: 20px; }
.project-portrait .portrait-gallery .media-portrait:nth-child(2) { transform: translateY(-12px); }
.project-portrait .media-portrait .media-empty { padding: 48px 9px 18px; text-align: center; }
.project-portrait .media-portrait .frame-label { top: 21px; left: 0; width: 100%; text-align: center; }
.project-portrait .media-portrait .empty-title { max-width: 140px; font-size: 17px; }
.project-portrait .media-portrait .empty-caption { max-width: 135px; font-size: 13px; }
.project .media-empty { position: relative; min-height: 0; padding: 44px 20px; gap: 6px; background: radial-gradient(circle at 65% 35%,#61200f 0%,#2a100c 31%,#120b0a 68%,#080809 100%); }
.project .media-empty::before { content: ''; position: absolute; inset: 0; opacity: .28; background: url('media/lava-world-reference.png') center/cover; filter: blur(5px); transform: scale(1.06); }
.project .media-empty > * { position: relative; z-index: 1; }
.project .frame-label { position: absolute; top: 24px; left: 28px; }
.project .empty-title { font-size: 22px; font-weight: 700; color: #fff; }
.project .empty-caption { font-size: 16px; color: #ded0ca; }
.project .project-body { align-self: center; padding: 2px 0 0; }
.project .project-meta { justify-content: flex-start; gap: 24px; }
.project .project-meta .eyebrow { color: var(--orange); font-size: 15px; letter-spacing: .3em; }
.project .draft-badge { color: #d6b5a2; border-color: #8d3b1a; }
.project .project-title { max-width: 640px; margin: 12px 0 20px; font-size: clamp(42px,4.15vw,72px); line-height: .88; color: #f5f5f5; overflow-wrap: anywhere; }
.project .project-title-lead,.project .project-title-accent { display: block; }
.project .project-title-accent { color: var(--orange); }
.project .project-title-word-accent { color: var(--orange); }
.project .project-app-link { display: flex; align-items: center; gap: 16px; width: min(100%,390px); min-height: 68px; padding: 10px 18px; border: 2px solid var(--orange); border-radius: 16px; background: #080809; box-shadow: 0 0 7px #ff6500aa, 0 0 22px #ff650055, inset 0 0 9px #ff650033; color: #fff; font-size: 21px; font-weight: 500; text-align: left; }
.project .project-app-link:not(:disabled):hover { background: #261009; color: #fff; }
.project .project-app-link.is-pending { opacity: .75; cursor: not-allowed; }
.project .project-app-arrow { margin-left: auto; color: var(--orange); font-size: 34px; line-height: 1; }
.project .project-app-icon { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; }
.project .project-app-links { display: grid; grid-template-columns: 62px minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 10px; width: min(100%,520px); }
.project .project-links-icon { display: block; width: 62px; height: 62px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 14px #ff650077; }
.project .project-platform-link { width: 100%; min-height: 62px; padding: 8px 12px; font-size: 18px; text-decoration: none; }
.project .project-platform-link .project-app-arrow { font-size: 25px; }
#project-heroes-arena-adventure-rpg .media { aspect-ratio: 576/260; }
.project .project-summary { max-width: 620px; margin: 20px 0; font-size: clamp(19px,1.55vw,24px); line-height: 1.38; color: #dedede; }
.project .tags { margin: 16px 0 0; }
.project .facts { justify-content: flex-start; gap: 22px; margin: 16px 0 0; }
.project .second-text { align-self: center; padding: 0 12px 0 28px; }
.project .second-text .eyebrow { color: var(--orange); }
.project .second-text h3 { margin: 15px 0 20px; font-size: clamp(34px,3vw,50px); }
.project .responsibilities { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }
.project .responsibilities li { position: relative; padding-left: 30px; color: #ddd; font-size: clamp(18px,1.3vw,22px); line-height: 1.32; }
.project .responsibilities li::before { content: ''; position: absolute; left: 4px; top: .5em; width: 11px; height: 11px; background: var(--orange); transform: rotate(45deg); }
#project-warriors-of-gods .second-text { width: 100%; max-width: none; padding-left: 0; padding-right: 0; }
.project .company-link { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px; border: 1px solid #ff7018; border-radius: 12px; color: #f5f5f5; background: #130b08; box-shadow: 0 0 14px #ff650044; text-decoration: none; }
.project .company-link:hover,.project .company-link:focus-visible { background: #2b1208; box-shadow: 0 0 22px #ff650077; }
.project .company-logo { display: block; width: 76px; height: 34px; object-fit: contain; }
.project .app-collection { align-self: center; display: flex; flex-direction: column; justify-content: center; gap: 24px; width: 100%; min-height: 330px; padding: 20px 10px; }
.project .app-collection-label { align-self: center; color: var(--orange); font-size: 13px; letter-spacing: .25em; }
.project .app-collection-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; justify-items: center; gap: 23px 16px; width: min(100%,500px); margin: 0 auto; }
.project .app-tile { display: block; width: 78px; height: 78px; padding: 3px; border: 2px solid #ff7018; border-radius: 22px; background: #140906; box-shadow: 0 0 7px #ff6000, 0 0 19px #ff5900b8, 0 0 34px #ff590055; --x: 0px; --y: 0px; --turn: 0deg; animation: app-float 4s ease-in-out infinite; transition: transform .22s ease,box-shadow .22s ease; }
.project .app-collection-left .app-tile:nth-child(1) { --x: -16px; --y: -7px; --turn: -7deg; }
.project .app-collection-left .app-tile:nth-child(2) { --x: 13px; --y: 10px; --turn: 5deg; }
.project .app-collection-left .app-tile:nth-child(3) { --x: 20px; --y: -13px; --turn: 8deg; }
.project .app-collection-left .app-tile:nth-child(4) { --x: -24px; --y: 8px; --turn: 6deg; }
.project .app-collection-left .app-tile:nth-child(5) { --x: 0px; --y: 0px; --turn: -3deg; }
.project .app-collection-left .app-tile:nth-child(6) { --x: 18px; --y: 12px; --turn: -6deg; }
.project .app-collection-left .app-tile:nth-child(7) { --x: -9px; --y: 17px; --turn: -5deg; }
.project .app-collection-left .app-tile:nth-child(8) { --x: 15px; --y: -6px; --turn: 7deg; }
.project .app-collection-left .app-tile:nth-child(9) { --x: 25px; --y: 14px; --turn: 4deg; }
.project .app-collection-right .app-tile:nth-child(1) { grid-column: 2; grid-row: 1; --x: -4px; --y: -6px; --turn: -7deg; }
.project .app-collection-right .app-tile:nth-child(2) { grid-column: 3; grid-row: 2; --x: 8px; --y: 1px; --turn: 6deg; }
.project .app-collection-right .app-tile:nth-child(3) { grid-column: 2; grid-row: 3; --x: 4px; --y: 7px; --turn: 5deg; }
.project .app-collection-right .app-tile:nth-child(4) { grid-column: 1; grid-row: 2; --x: -8px; --y: -1px; --turn: -5deg; }
.project .app-tile:nth-child(3n + 2) { animation-delay: -1.3s; }
.project .app-tile:nth-child(3n) { animation-delay: -2.6s; }
.project .app-tile:hover,.project .app-tile:focus-visible { animation: none; transform: translate(var(--x),calc(var(--y) - 6px)) rotate(var(--turn)) scale(1.16); box-shadow: 0 0 11px #ff6000, 0 0 28px #ff5900, 0 0 48px #ff590099; outline: none; z-index: 2; }
.project .app-tile img { display: block; width: 100%; height: 100%; border-radius: 16px; object-fit: cover; }
.project .app-tile-featured { width: 106px; height: 106px; border-radius: 26px; box-shadow: 0 0 10px #ff6000, 0 0 27px #ff5900d9, 0 0 48px #ff590077; }
.project .app-tile-featured img { border-radius: 19px; }
.project .app-collection-right .app-collection-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(3,104px); gap: 0 12px; width: min(100%,390px); }
.project .app-collection-right .app-tile { width: 94px; height: 94px; }
@keyframes app-float { 0%,100% { transform: translate(var(--x),var(--y)) rotate(var(--turn)); } 50% { transform: translate(var(--x),calc(var(--y) - 9px)) rotate(var(--turn)); } }
@media (prefers-reduced-motion: reduce) { .project .app-tile { animation: none; transform: translate(var(--x),var(--y)) rotate(var(--turn)); transition: none; } }
.project .case { display: flex; flex-direction: column; align-items: center; grid-column: 1/-1; border: 0; padding-top: 6px; }
.project .case-toggle-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 26px; width: 100%; }
.project .case-toggle-line { position: relative; height: 1px; background: linear-gradient(90deg,transparent 0%,#ff6500 95%); box-shadow: 0 0 8px #ff650099; }
.project .case-toggle-line:last-child { background: linear-gradient(90deg,#ff6500 5%,transparent 100%); }
.project .case-toggle-line::after { content: ''; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #ff6500; box-shadow: 0 0 9px #ff6500; }
.project .case-toggle-line:last-child::after { right: auto; left: 0; }
.project .case-toggle { display: grid; place-items: center; width: 76px; height: 76px; padding: 0; border: 2px solid var(--orange); border-radius: 50%; background: #130805; box-shadow: 0 0 10px #ff6500,0 0 24px #ff650077; cursor: pointer; }
.project .case-toggle::after { content: ''; display: block; width: 36px; height: 36px; background: linear-gradient(var(--orange),var(--orange)) center/36px 4px no-repeat,linear-gradient(var(--orange),var(--orange)) center/4px 36px no-repeat; transform-origin: center; }
.project .case-toggle[aria-expanded="true"]::after { background: linear-gradient(var(--orange),var(--orange)) center/36px 4px no-repeat; }
.project .case-toggle:hover { background: #341208; box-shadow: 0 0 14px #ff6500,0 0 34px #ff650088; }
.project .case-toggle[aria-expanded="false"]:hover::after { animation: case-propeller .42s linear infinite; }
@keyframes case-propeller { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .project .case-toggle[aria-expanded="false"]:hover::after { animation: none; } }
.project .case-content { width: min(100%,850px); padding-top: 32px; }
.project .case-content-visual { width: min(100%,1080px); padding-top: 48px; }
.project .case-detail-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 7%; padding: 30px 0 44px; border-bottom: 1px solid var(--line); }
.project .case-detail-row:last-child { border-bottom: 0; }
.project .case-detail-row:nth-child(even) .case-detail-copy { order: 2; }
.project .case-detail-row:nth-child(even) .case-detail-visual { order: 1; }
.project .case-detail-copy .eyebrow { color: var(--orange); font-size: 13px; letter-spacing: .22em; }
.project .case-detail-copy h4 { margin: 14px 0 18px; color: #f5f5f5; font-size: clamp(30px,3vw,44px); line-height: 1; text-transform: uppercase; }
.project .case-detail-copy p { margin: 0; color: #d7d7d7; font-size: clamp(18px,1.5vw,22px); line-height: 1.45; }
.project .case-detail-copy .case-story-list { margin: 20px 0 0; }
.project .case-detail-copy .case-story-list li { font-size: clamp(17px,1.35vw,20px); }
.project .case-detail-visual { display: grid; place-items: center; position: relative; aspect-ratio: 16/10; overflow: hidden; border: 1px solid #ff7018a8; border-radius: 18px; background: radial-gradient(circle at 55% 35%,#4b1b0e,#170d0a 47%,#090909 80%); box-shadow: 0 0 12px #ff590066, inset 0 0 18px #ff590033; }
.project .case-detail-visual::before { content: ''; position: absolute; inset: 10px; border: 1px dashed #ff9a585c; border-radius: 11px; pointer-events: none; }
.project .case-detail-visual span { max-width: 80%; color: #e4a47c; font-size: 14px; font-weight: 700; letter-spacing: .18em; text-align: center; }
.project .case-detail-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project .case-detail-visual:has(img)::before { display: none; }
.project .case-detail-landscape-video { aspect-ratio: 576/260; border: 2px solid #ff7018; box-shadow: 0 0 7px #ff6000,0 0 22px #ff5900cc,0 0 44px #ff590066,inset 0 0 16px #ff590066; }
.project .case-detail-landscape-video::before { display: none; }
.project .case-detail-landscape-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
#project-heroes-arena-adventure-rpg .case-detail-row:last-child .case-detail-landscape-video { aspect-ratio: 1392/820; }
.project .case-detail-video { justify-self: center; width: min(100%,215px); aspect-ratio: 9/20; border: 2px solid #ff7018; border-radius: 20px; box-shadow: 0 0 7px #ff6000,0 0 22px #ff5900cc,0 0 44px #ff590066,inset 0 0 16px #ff590066; }
.project .case-detail-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.project .case-detail-video span { max-width: 75%; line-height: 1.5; }
.project .story-panel p { max-width: 850px; font-size: clamp(19px,1.6vw,23px); line-height: 1.5; }
.project .case-story-list { display: grid; gap: 12px; margin: 2px 0 28px; padding: 0; list-style: none; }
.project .case-story-list li { position: relative; padding-left: 27px; color: #ddd; font-size: clamp(18px,1.45vw,21px); line-height: 1.45; }
.project .case-story-list li::before { content: ''; position: absolute; left: 5px; top: .55em; width: 10px; height: 10px; background: var(--orange); transform: rotate(45deg); }
@media(max-width: 900px) { .project { grid-template-columns: minmax(0,1fr); gap: 25px; } .project .media { grid-column: 1; grid-row: 1; } .project .project-body { grid-column: 1; grid-row: 2; } .project .second-text { grid-column: 1; grid-row: 3; padding: 18px 0 0; } .project .second-media { grid-row: 4; } .project .case { grid-row: 5; } .project-portrait .portrait-stage { grid-column: 1; grid-row: 1; min-height: 360px; } .project-portrait .portrait-stage.second-media { grid-row: 4; } .project .case-detail-row { gap: 25px; } }
@media(max-width: 640px) { .project .case-detail-row { grid-template-columns: 1fr; gap: 22px; padding: 24px 0 36px; } .project .case-detail-row:nth-child(even) .case-detail-copy,.project .case-detail-row:nth-child(even) .case-detail-visual { order: initial; } .project-portrait .portrait-stage { min-height: 0; padding: 10px 0; } .project-portrait .portrait-gallery { gap: 8px; } .project .case-content-visual { padding-top: 24px; } }
@media(max-width: 560px) { .projects { padding-top: 58px; } .project { padding: 30px 0 58px; } .project .media { aspect-ratio: 16/10; border-radius: 17px; } .project .media-empty { padding: 40px 12px 20px; } .project .frame-label { top: 15px; left: 17px; } .project .project-title { font-size: clamp(36px,9vw,48px); } .project .project-app-link { min-height: 60px; font-size: 18px; } .project .case-toggle { width: 66px; height: 66px; } .project .app-collection { min-height: 285px; gap: 18px; } .project .app-collection-grid { gap: 18px 10px; } .project .app-tile { width: 64px; height: 64px; border-radius: 18px; } .project .app-tile img { border-radius: 12px; } .project .app-tile-featured { width: 88px; height: 88px; border-radius: 22px; } .project .app-tile-featured img { border-radius: 15px; } .project .app-collection-right .app-collection-grid { grid-template-rows: repeat(3,84px); } .project .app-collection-right .app-tile { width: 76px; height: 76px; } }
@media(max-width: 560px) { .project .case-toggle-row { gap: 15px; } }
@media(max-width: 560px) { .project .project-app-links { grid-template-columns: 48px minmax(0,1fr) minmax(0,1fr); gap: 6px; } .project .project-links-icon { width: 48px; height: 48px; border-radius: 10px; } .project .project-platform-link { min-height: 52px; padding: 7px 9px; font-size: 15px; } .project .project-platform-link .project-app-arrow { font-size: 20px; } }