.journey-section { padding: 90px var(--pad) 60px; background: #100c18; color: #f3eadc; scroll-margin-top: 0; overflow: hidden; }
.journey-heading { display: grid; grid-template-columns: 1.6fr 1fr; align-items: end; gap: 12%; max-width: 1380px; margin: 0 auto 38px; }
.journey-heading .eyebrow { color: #d2b078; }
.journey-heading h2 { font-size: clamp(36px,4.5vw,64px); line-height: 1.18; margin: 20px 0 0; max-width: 720px; }
html:lang(ta) .journey-heading h2 { font-size: clamp(28px,3.2vw,44px); line-height: 1.7; }
.journey-description { margin: 0; font-size: 13px; line-height: 1.95; color: #b6a8bc; }
.journey-cinema { position: relative; aspect-ratio: 16/9; width: 100%; max-width: 1380px; margin: auto; background: #0a0811; border: 1px solid #ba92553b; border-radius: 18px; overflow: hidden; }
.journey-cinema video { display: block; width: 100%; height: 100%; object-fit: cover; }
.journey-cinema::after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent,#0b0716b8); pointer-events: none; }
.journey-controls { position: absolute; right: 22px; top: 22px; z-index: 2; display: flex; gap: 7px; }
.journey-controls button { min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid #e3cb9f60; border-radius: 7px; background: #150d22c9; color: #f1dfbe; font: inherit; font-size: 11px; cursor: pointer; backdrop-filter: blur(10px); }
.journey-controls button:disabled { opacity: .6; cursor: default; }
.journey-controls button:focus-visible { outline: 2px solid #f1d49c; outline-offset: 4px; }
.journey-signature { display: flex; align-items: center; gap: 10px; position: absolute; bottom: 22px; left: 24px; z-index: 2; font-size: 10px; color: #edd4ac; }
.journey-signature img { border-radius: 9px; width: 32px; height: 32px; }
.journey-legend { display: flex; justify-content: center; align-items: center; gap: clamp(24px,5vw,70px); margin-top: 27px; }
.journey-legend > span { display: flex; gap: 10px; align-items: center; font-size: 12px; color: #c8b8cf; }
.journey-legend b { font-weight: 400; }
.journey-legend i { display: block; height: 9px; width: 9px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.journey-legend .earth { background: #9fba7e; color: #9fba7e88; }
.journey-legend .water { background: #6cb4e5; color: #6cb4e588; }
.journey-legend .fire { background: #e5a065; color: #e5a06588; }
.journey-legend .air { background: #e7e3f2; color: #e7e3f288; }
.journey-legend .ether { background: #a992e2; color: #a992e288; }
@media(max-width:800px) { .journey-section { padding-block: 60px 40px; } .journey-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px; } .journey-heading h2 { font-size: 40px; } .journey-controls { top: 10px; right: 10px; } .journey-controls button { font-size: 9px; min-height: 34px; padding: 6px 9px; } .journey-signature { left: 14px; bottom: 12px; } .journey-signature span { font-size: 8px; } .journey-signature img { width: 25px; height: 25px; } .journey-legend { gap: 20px; } .journey-legend > span { gap: 7px; font-size: 10px; } }
@media(max-width:480px) { .journey-cinema { width: calc(100% + 16px); margin-left: -8px; border-radius: 10px; } html:lang(ta) .journey-heading h2 { font-size: 27px; } .journey-description { font-size: 12px; } .journey-legend { gap: 16px; flex-wrap: wrap; row-gap: 14px; margin-top: 20px; } .journey-legend > span { font-size: 9px; gap: 6px; } .journey-legend i { width: 6px; height: 6px; } .journey-signature img { width: 20px; height: 20px; } .journey-signature span { font-size: 6px; } }