/* atlas.niramind.com: travel films. Cinematic night, warm amber light, Fraunces display. */
:root {
  --bg: #07080c;
  --fg: #f4efe6;
  --muted: #a8a196;
  --line: rgb(244 239 230 / 0.12);
  --amber: #ffb35c;
  --coral: #ff6b5c;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --nm-fg: var(--fg);
  --nm-muted: var(--muted);
  --nm-line: var(--line);
  --nm-bar-bg: rgb(7 8 12 / 0.7);
  --nm-accent: var(--amber);
}
body { background: var(--bg); color: var(--fg); font: 400 1rem/1.65 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
::selection { background: rgb(255 179 92 / 0.35); }

/* ── Hero ── */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: end; padding: 7rem var(--nm-gutter) clamp(3rem, 10vh, 6rem); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70rem 40rem at 70% 20%, rgb(255 179 92 / 0.12), transparent 60%), radial-gradient(50rem 30rem at 10% 100%, rgb(80 120 200 / 0.12), transparent 60%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; z-index: -1; background: linear-gradient(transparent, var(--bg)); }
.star-field { position: absolute; inset: 0; opacity: 0.7;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 62%, #fff, transparent), radial-gradient(1.5px 1.5px at 44% 30%, #ffe7c2, transparent), radial-gradient(1px 1px at 63% 12%, #fff, transparent),
    radial-gradient(1px 1px at 78% 48%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 22%, #ffe7c2, transparent), radial-gradient(1px 1px at 8% 80%, #fff, transparent), radial-gradient(1px 1px at 55% 85%, #fff, transparent);
  animation: twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: 0.35; } }
.globe { position: absolute; top: 50%; right: max(-8rem, -10vw); width: min(46rem, 110vw); translate: 0 -55%; }
.globe__halo { fill: none; stroke: rgb(255 179 92 / 0.18); stroke-width: 1; animation: halo 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes halo { 50% { stroke: rgb(255 179 92 / 0.35); transform: scale(1.02); } }
.globe__lines { fill: none; stroke: rgb(169 205 255 / 0.18); stroke-width: 1; }
.globe__spin ellipse { animation: meridian 14s linear infinite; transform-origin: 300px 300px; }
.globe__spin ellipse:nth-child(2) { animation-delay: -3.5s; } .globe__spin ellipse:nth-child(3) { animation-delay: -7s; } .globe__spin ellipse:nth-child(4) { animation-delay: -10.5s; }
@keyframes meridian { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.02); } 100% { transform: scaleX(1); } }
.route { fill: none; stroke: url(#arc); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 8 10; animation: route 3s linear infinite; }
.route--2 { opacity: 0.6; animation-duration: 4.5s; }
@keyframes route { to { stroke-dashoffset: -72; } }
.pin { fill: var(--amber); filter: drop-shadow(0 0 6px var(--amber)); animation: blip 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pin--2 { fill: var(--coral); animation-delay: -1.2s; }
@keyframes blip { 50% { transform: scale(1.6); opacity: 0.6; } }
.plane { fill: #fff; filter: drop-shadow(0 0 6px #fff); }

.hero__copy { position: relative; max-width: 72rem; width: 100%; margin: 0 auto; }
.eyebrow { margin: 0; font: 600 0.78rem/1 "Inter", sans-serif; letter-spacing: 0.32em; text-transform: uppercase; color: var(--amber); }
.hero h1 { margin: 0.3rem 0 0; font: 300 clamp(5rem, 20vw, 13rem)/0.9 var(--display); letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff 20%, #f7d2a3 70%, #ff9f6e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { max-width: 32rem; margin: 1rem 0 0; font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--muted); }
.scroll-cue { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2rem; padding: 0.8rem 1.3rem; border-radius: 999px; color: var(--bg); background: var(--amber); font-weight: 600; text-decoration: none;
  box-shadow: 0 14px 40px -12px rgb(255 179 92 / 0.7); transition: transform 0.25s var(--nm-ease); }
.scroll-cue:hover { transform: translateY(-2px); }
.scroll-cue span { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }

/* ── Films ── */
.films { max-width: 82rem; margin: 0 auto; padding: clamp(3rem, 8vw, 5rem) var(--nm-gutter) clamp(4rem, 10vw, 7rem); }
.films__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 2rem; }
.films__head h2 { margin: 0; font: 600 clamp(2rem, 5vw, 3.2rem)/1 var(--display); }
.films__head p { margin: 0; color: var(--muted); }
.film-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.film { display: grid; gap: 1rem; }
.film__poster, .film__player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 1.4rem; overflow: hidden; cursor: pointer; background: #111;
  box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgb(0 0 0 / 0.9); }
.film__poster:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.scene { width: 100%; height: 100%; transition: transform 1.6s var(--nm-ease), filter 0.6s; animation: kenburns 24s ease-in-out infinite alternate; }
.scene--wc { animation-delay: -12s; }
@keyframes kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-2%, -1%, 0); } }
.film__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 0.55)); }
.film__poster:hover .scene { filter: saturate(1.15) brightness(1.05); }
.drift { animation: drift 30s linear infinite alternate; }
@keyframes drift { to { transform: translateX(120px); } }
.lights { animation: lights 5s steps(2) infinite; }
@keyframes lights { 50% { opacity: 0.7; } }
.shimmer { animation: shimmer 3s ease-in-out infinite; }
@keyframes shimmer { 50% { opacity: 0.15; transform: translateX(10px); } }
.mist { animation: mist 12s ease-in-out infinite alternate; }
@keyframes mist { to { transform: translateX(-80px); opacity: 0.12; } }
.film__play { position: absolute; z-index: 1; left: 50%; top: 50%; width: clamp(4rem, 9vw, 5.5rem); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: rgb(255 255 255 / 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgb(255 255 255 / 0.5); box-shadow: 0 0 0 0 rgb(255 179 92 / 0.5); animation: ring 2.6s ease-out infinite; transition: transform 0.3s var(--nm-ease), background-color 0.3s; }
.film__play::after { content: ""; position: absolute; top: 50%; left: 54%; translate: -50% -50%; border-style: solid; border-width: 0.75rem 0 0.75rem 1.2rem; border-color: transparent transparent transparent #fff; }
@keyframes ring { 70% { box-shadow: 0 0 0 1.4rem rgb(255 179 92 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 179 92 / 0); } }
.film__poster:hover .film__play { transform: scale(1.08); background: rgb(255 179 92 / 0.4); }
.film__meta { display: grid; gap: 0.15rem; padding-inline: 0.3rem; }
.film__coords { margin: 0; font: 500 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.1em; color: var(--amber); }
.film__meta h3 { margin: 0.2rem 0 0; font: 600 clamp(1.4rem, 3vw, 1.9rem)/1.15 var(--display); }
.film__status { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* The player (a real YouTube embed once a film is set; until then, a "coming soon" frame). */
.film__player { cursor: default; display: grid; place-items: center; background: radial-gradient(40rem 20rem at 50% 50%, rgb(255 179 92 / 0.12), transparent 70%), #0b0b10; }
.film__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.soon { display: grid; justify-items: center; gap: 0.8rem; padding: 1.5rem; text-align: center; }
.soon__reel { width: 4.5rem; height: 4.5rem; border-radius: 50%; border: 3px solid rgb(255 179 92 / 0.6); position: relative; animation: spin 3s linear infinite; }
.soon__reel::before, .soon__reel::after { content: ""; position: absolute; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: rgb(255 179 92 / 0.6); top: 0.5rem; left: 50%; translate: -50% 0; box-shadow: 0 2.3rem 0 rgb(255 179 92 / 0.6); }
.soon__reel::after { rotate: 90deg; transform-origin: 50% 1.75rem; }
@keyframes spin { to { rotate: 360deg; } }
.soon h4 { margin: 0; font: 600 clamp(1.2rem, 3vw, 1.6rem)/1.2 var(--display); }
.soon p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.soon button { margin-top: 0.4rem; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.soon button:hover { border-color: var(--amber); }
.films__more { margin: 2.5rem 0 0; text-align: center; color: var(--muted); font-family: var(--display); font-style: italic; font-size: 1.15rem; }