/* andenstudios.eu (2026-10-23): one full-screen section per game over its own screenshot (fixed, darkened), frosted cards
   for the text; static and light: no framework, WebP images, lazy loading, the trailers load only when played */
:root { --bg:#07090d; --text:#eef1f5; --muted:#aab3bf; --line:rgba(255,255,255,.12); --card:rgba(10,13,18,.62); --green:#8fcf6a; --steam:#1b2838; --brimir:#ff5a3c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:64px; }
html, body { margin:0; }
body { background:var(--bg); color:var(--text); font:16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color:inherit; }
img { max-width:100%; height:auto; display:block; }
h1, h2, h3 { font-family:"Rubik", "Inter", system-ui, sans-serif; line-height:1.1; margin:0; letter-spacing:-.01em; }

/* the bar: slim, see-through, blurred */
.bar { position:fixed; inset:0 0 auto; z-index:10; display:flex; align-items:center; gap:14px; height:60px; padding:0 max(18px, env(safe-area-inset-left, 0px));
  background:rgba(7,9,13,.55); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid var(--line); }
.mark { display:flex; align-items:center; gap:10px; text-decoration:none; font:800 18px/1 "Rubik", system-ui, sans-serif; letter-spacing:.02em; }
.mark img { width:36px; height:36px; border-radius:50%; }
.nav { margin-left:auto; display:flex; gap:4px; }
.nav a { text-decoration:none; font-size:14.5px; color:var(--muted); padding:8px 12px; border-radius:8px; transition:color .2s, background .2s; }
.nav a:hover { color:var(--text); background:rgba(255,255,255,.08); }

/* a full-screen section over its picture */
.scene { position:relative; min-height:100vh; display:flex; align-items:center; padding:96px max(18px, env(safe-area-inset-left, 0px)) 72px; background:#000 center / cover no-repeat fixed; isolation:isolate; }
.scene::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--shade); }
.wrap { width:min(1160px, 100%); margin:0 auto; }

/* the studio */
#studio { --shade:radial-gradient(ellipse at 50% 40%, rgba(7,9,13,.35), rgba(7,9,13,.88) 75%), linear-gradient(transparent 60%, var(--bg)); text-align:center; }
#studio .logo { width:150px; height:150px; margin:0 auto 22px; border-radius:50%; box-shadow:0 10px 40px rgba(0,0,0,.6); }
#studio h1 { font-size:clamp(40px, 7vw, 76px); font-weight:800; }
#studio .lead { margin:14px auto 0; max-width:620px; font-size:clamp(17px, 2vw, 20px); color:#d5dbe3; }
.picks { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.pick { display:flex; align-items:center; gap:10px; text-decoration:none; padding:10px 16px 10px 10px; border-radius:14px; background:var(--card); border:1px solid var(--line); backdrop-filter:blur(8px); transition:transform .2s, border-color .2s; }
.pick:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.3); }
.pick img { width:56px; height:36px; object-fit:cover; border-radius:6px; }
.pick b { display:block; font-size:15px; } .pick small { color:var(--muted); font-size:12.5px; }
.down { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); color:var(--muted); text-decoration:none; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }

/* a game */
.game { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:28px; align-items:center; }
.game.flip .card { order:2; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px; backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); box-shadow:0 20px 60px rgba(0,0,0,.45); }
.badge { display:inline-flex; align-items:center; gap:6px; font:700 12px/1 "Inter", system-ui, sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.1); color:var(--muted); margin-bottom:14px; }
.badge.new { background:rgba(143,207,106,.18); color:var(--green); }
.card h2 { font-size:clamp(30px, 4vw, 46px); font-weight:800; margin-bottom:12px; }
.title-art { width:min(480px, 100%); margin:-4px 0 12px -6px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.7)); }
.card p { margin:0 0 12px; color:#d5dbe3; }
.feats { list-style:none; padding:0; margin:4px 0 18px; display:grid; gap:8px; }
.feats li { display:flex; gap:10px; color:#d5dbe3; } .feats li span { flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.08); font-size:15px; }
.btns { display:flex; gap:10px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:650; font-size:15px; padding:12px 18px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.08); transition:transform .15s, filter .15s, background .2s; }
.btn:hover { transform:translateY(-1px); background:rgba(255,255,255,.14); }
.btn.green { background:linear-gradient(#9fde78, #6fb046); color:#0d1a06; border-color:transparent; box-shadow:0 6px 20px rgba(111,176,70,.35); }
.btn.steam { background:linear-gradient(#2a475e, #1b2838); color:#fff; border-color:rgba(102,192,244,.35); }
.btn.red { background:linear-gradient(#ff7a52, #e0401f); color:#fff; border-color:transparent; box-shadow:0 6px 20px rgba(224,64,31,.35); }
.btn:hover.green, .btn:hover.red { filter:brightness(1.07); }
.soon { font-size:13px; color:var(--muted); margin-top:10px; }

/* its pictures */
.media { display:grid; gap:12px; }
.media .big { border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.6); border:1px solid var(--line); aspect-ratio:16 / 9; object-fit:cover; width:100%; }
.thumbs { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.thumbs img { border-radius:10px; aspect-ratio:16 / 9; object-fit:cover; border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.5); }

/* a trailer: our own picture and a play button; YouTube loads only after a click */
.video { position:relative; display:block; width:100%; aspect-ratio:16 / 9; border:1px solid var(--line); padding:0; cursor:pointer; background:#000 center / cover no-repeat; border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.video::after { content:""; position:absolute; left:50%; top:50%; width:72px; height:72px; transform:translate(-50%, -50%); border-radius:50%; background:rgba(224,64,31,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 34px no-repeat; box-shadow:0 6px 20px rgba(0,0,0,.6); transition:transform .2s; }
.video:hover::after { transform:translate(-50%, -50%) scale(1.08); }
.video span { position:absolute; left:14px; top:10px; font-weight:650; font-size:14px; text-shadow:0 1px 4px #000; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.videos { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

#genes { --shade:linear-gradient(90deg, rgba(7,9,13,.86), rgba(7,9,13,.45) 55%, rgba(7,9,13,.75)), linear-gradient(var(--bg), transparent 14%, transparent 86%, var(--bg)); }
#brimir { --shade:linear-gradient(270deg, rgba(7,9,13,.86), rgba(7,9,13,.4) 55%, rgba(7,9,13,.75)), linear-gradient(var(--bg), transparent 14%, transparent 86%, var(--bg)); }

/* contact and footer */
#contact { padding:90px 18px 70px; text-align:center; }
#contact h2 { font-size:clamp(28px, 4vw, 40px); font-weight:800; margin-bottom:10px; }
#contact p { color:var(--muted); margin:0 0 20px; }
.foot { text-align:center; padding:22px 18px; color:var(--muted); font-size:13.5px; border-top:1px solid var(--line); }

@media (max-width: 900px) {
  .game, .game.flip { grid-template-columns:1fr; } .game.flip .card { order:0; }
  .scene { background-attachment:scroll; min-height:auto; } /* (fixed backgrounds are slow or broken on phones) */
  .videos { grid-template-columns:1fr; } .nav a { padding:6px 8px; font-size:13.5px; } .mark span { display:none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* ---------- The Siege of Brimir: rougher, metallic, sci-fi (asked): cut corners, brushed steel, scan lines, a hazard
   stripe, orange-red neon, a squared tech font ---------- */
#brimir { --cut:18px; }
#brimir .card { border:0; border-radius:0; padding:30px 30px 26px; position:relative; color:#e6e9ee;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), /* scan lines */
    linear-gradient(105deg, rgba(255,255,255,.08), transparent 30%, rgba(255,255,255,.05) 55%, transparent 75%), /* sheen */
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 5px), /* brushing */
    linear-gradient(160deg, rgba(58,64,74,.92), rgba(20,23,28,.94) 60%, rgba(34,38,45,.94));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.25), 0 20px 60px rgba(0,0,0,.6); }
#brimir .card::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; background:repeating-linear-gradient(135deg, #ff5a3c 0 12px, #16181c 12px 24px); opacity:.9; } /* hazard stripe */
#brimir .card::after { content:""; position:absolute; right:14px; bottom:12px; width:44px; height:6px; background:linear-gradient(90deg, #ff5a3c 0 30%, transparent 30% 40%, #ff5a3c 40% 70%, transparent 70% 80%, #ff5a3c 80%); box-shadow:0 0 10px rgba(255,90,60,.7); }
#brimir .badge { border-radius:0; background:rgba(255,90,60,.14); color:#ff8a6a; font-family:"Chakra Petch", "Rubik", sans-serif; clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); padding:6px 14px; }
#brimir h2 { font-family:"Chakra Petch", "Rubik", sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#fff;
  text-shadow:0 0 18px rgba(255,90,60,.55), 0 2px 0 #000; }
#brimir h2 em { font-style:normal; color:#ff6a48; }
#brimir .feats li span { border-radius:0; background:rgba(255,90,60,.12); color:#ff8a6a; clip-path:polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
#brimir .btn { border-radius:0; font-family:"Chakra Petch", "Rubik", sans-serif; text-transform:uppercase; letter-spacing:.06em; clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding:12px 24px; }
#brimir .media .big, #brimir .video, #brimir .thumbs img { border-radius:0; clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); border:0; outline:1px solid rgba(255,255,255,.15); outline-offset:-1px; }
#brimir .video::after { border-radius:0; clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* ---------- Genes vs the World: organic, soft and green ---------- */
#genes .card { border-radius:26px; border-color:rgba(143,207,106,.22); box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(143,207,106,.08), inset 0 1px 0 rgba(255,255,255,.08); }
#genes .feats li span { border-radius:50%; background:rgba(143,207,106,.14); }
#genes .media .big, #genes .thumbs img { border-radius:20px; }
#genes .btn { border-radius:999px; }
.video.on::after, .video.on span { display:none; }

/* the game screenshots behind Genes vs the World carry the game's panels: softened so the card reads first */
#genes::after { content:""; position:absolute; inset:0; z-index:-1; backdrop-filter:blur(5px) brightness(.8); -webkit-backdrop-filter:blur(5px) brightness(.8); }
#genes::before { z-index:-1; } #genes { --shade:linear-gradient(90deg, rgba(7,9,13,.82), rgba(7,9,13,.5) 55%, rgba(7,9,13,.7)), linear-gradient(var(--bg), transparent 14%, transparent 86%, var(--bg)); }

/* the studio's screen: the text on the left over a dark gradient, the alien free on the right (asked: the logo sat on him) */
#studio { text-align:left; background-position:72% 35%; --shade:linear-gradient(90deg, rgba(7,9,13,.92) 0%, rgba(7,9,13,.72) 34%, rgba(7,9,13,.15) 62%, rgba(7,9,13,.25) 100%), linear-gradient(transparent 65%, var(--bg)); }
#studio .wrap { display:flex; flex-direction:column; align-items:flex-start; }
#studio .who { max-width:540px; }
#studio .brand { display:flex; align-items:center; gap:18px; }
#studio .logo { width:96px; height:96px; margin:0; flex:none; }
#studio .lead { margin:16px 0 0; }
#studio .picks { justify-content:flex-start; }
@media (max-width: 900px) { #studio { background-position:60% 30%; --shade:linear-gradient(rgba(7,9,13,.55), rgba(7,9,13,.88) 60%, var(--bg)); } #studio .logo { width:72px; height:72px; } }

/* one trailer (asked: too many boxes), the gameplay video as a link that plays in the same box */
.more-video { justify-self:start; background:none; border:0; padding:4px 2px; color:#ff8a6a; font:650 14px "Chakra Petch", "Rubik", sans-serif; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.more-video:hover { color:#ffb39e; }
/* the studio's picture zoomed so the alien stands on the right of the text */
#studio { background-size:145% auto; background-position:0% 30%; }
@media (max-width: 900px) { #studio { background-size:cover; background-position:60% 30%; } }

/* ---------- the two games side by side (asked 2026-10-23), each over its own picture filling its half; on phones one
   under the other. In a half the card comes first, its pictures below ---------- */
.games { display:grid; grid-template-columns:1fr 1fr; }
.games .scene { min-height:100vh; align-items:flex-start; padding:92px clamp(16px, 2.6vw, 40px) 60px; background-attachment:scroll; }
.games .game, .games .game.flip { grid-template-columns:1fr; gap:18px; }
.games .game.flip .card { order:0; }
.games .card { padding:24px; }
.games .media .big, .games .video { aspect-ratio:16 / 9; }
#genes { --shade:linear-gradient(rgba(7,9,13,.5), rgba(7,9,13,.82) 70%, rgba(7,9,13,.95)); border-right:1px solid rgba(255,255,255,.06); }
#brimir { --shade:linear-gradient(rgba(7,9,13,.45), rgba(7,9,13,.8) 70%, rgba(7,9,13,.95)); }
#genes::after { backdrop-filter:blur(4px) brightness(.85); -webkit-backdrop-filter:blur(4px) brightness(.85); }
@media (max-width: 760px) { .games { grid-template-columns:1fr; } .games .scene { min-height:auto; } #genes { border-right:0; } }

/* Brimir's icons: flat, angular line icons in the section's orange (asked: rougher, flat), not emoji */
#brimir .feats li span svg { width:16px; height:16px; fill:none; stroke:#ff6a48; stroke-width:2; stroke-linejoin:miter; stroke-linecap:square; }
#brimir .feats li span { background:rgba(255,90,60,.1); outline:1px solid rgba(255,106,72,.35); outline-offset:-1px; }
/* phones: short menu labels, a title that fits */
.nav .short { display:none; }
@media (max-width: 600px) {
  .nav .long { display:none; } .nav .short { display:inline; }
  #studio h1 { font-size:clamp(30px, 9.5vw, 44px); } #studio .brand { gap:12px; } #studio .logo { width:60px; height:60px; }
}

/* Genes vs the World's slideshow (asked): crossfading in-game pictures, a caption, arrows and dots */
.slides { position:relative; aspect-ratio:16 / 9; border-radius:20px; overflow:hidden; border:1px solid rgba(143,207,106,.25); box-shadow:0 20px 60px rgba(0,0,0,.6); background:#0b0e12; }
.slide { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .9s ease; }
.slide.on { opacity:1; }
.slide img { width:100%; height:100%; object-fit:cover; }
.slide figcaption { position:absolute; left:0; right:0; bottom:0; padding:28px 16px 34px; font-size:14px; color:#eef1f5; background:linear-gradient(transparent, rgba(7,9,13,.85)); }
.sl { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(7,9,13,.55); color:#fff; font-size:24px; line-height:1; cursor:pointer; opacity:0; transition:opacity .2s, background .2s; }
.sl.prev { left:10px; } .sl.next { right:10px; }
.slides:hover .sl, .sl:focus-visible { opacity:1; } .sl:hover { background:rgba(143,207,106,.35); }
.dots { position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:7px; }
.dots button { width:8px; height:8px; padding:0; border-radius:50%; border:0; background:rgba(255,255,255,.4); cursor:pointer; transition:width .25s, background .25s; }
.dots button.on { width:22px; border-radius:4px; background:var(--green); }
@media (hover: none) { .sl { opacity:1; } } /* (touch screens: the arrows always) */
@media (prefers-reduced-motion: reduce) { .slide { transition:none; } }

/* side by side on narrower laptops too: a little tighter between 760 and 1100 px */
@media (min-width: 761px) and (max-width: 1100px) { .games .scene { padding:84px 14px 40px; } .games .card { padding:18px; } .card h2 { font-size:28px; } .feats li { font-size:14.5px; } .btn { padding:10px 14px; font-size:14px; } }

/* (asked 2026-10-23) "Our games" higher; the two shortcuts in one row; the games as two independent panels with space between */
.down { bottom:72px; padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:rgba(7,9,13,.45); backdrop-filter:blur(6px); }
.down:hover { color:var(--text); border-color:rgba(255,255,255,.3); }
#studio .who { max-width:640px; }
#studio .picks { flex-wrap:nowrap; }
#studio .pick { flex:0 1 auto; min-width:0; }
.games { gap:24px; padding:24px; }
.games .scene { border-radius:24px; overflow:hidden; min-height:calc(100vh - 48px); box-shadow:0 24px 60px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.08); }
#genes { border-right:1px solid rgba(255,255,255,.08); }
.games .scene { padding-top:40px; }
@media (max-width: 760px) { .games { gap:16px; padding:12px; } .games .scene { border-radius:18px; min-height:auto; padding-top:28px; } #studio .picks { flex-wrap:wrap; } .down { bottom:24px; } }

/* Brimir's own logo as its title (asked): the metal letters with their red glow, from the studio's Logo/ForShop/logo_1280.png */
#brimir h2.logo-title { margin:-6px 0 6px -10px; text-shadow:none; } #brimir h2.logo-title img { width:min(460px, 100%); filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); }

/* the studio's full logo (the duck and ANDEN, ANDEN_STUDIOS/ENTREGABLES/anden_color-1000x1000.png) in the studio screen, asked */
#studio .brand { flex-direction:column; align-items:flex-start; gap:6px; } #studio .logo-full { width:min(240px, 50vw); height:auto; margin-left:-12px; filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)); }
@media (max-width: 600px) { #studio .logo-full { width:170px; } }

/* the logo spells the name: the h1 stays for search engines and screen readers, out of sight */
.vh { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#studio .logo-full { width:min(300px, 60vw); margin:0 0 4px -10px; }
@media (max-width: 600px) { #studio .logo-full { width:200px; } }

/* the description and the two game boxes side by side (asked: the boxes beside the text, not under it); stacked on phones */
#studio .who { max-width:820px; }
#studio .intro { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:22px; align-items:center; margin-top:14px; }
#studio .intro .lead { margin:0; }
#studio .intro .picks { flex-direction:column; flex-wrap:nowrap; margin:0; gap:10px; }
@media (max-width: 760px) { #studio .intro { grid-template-columns:1fr; } #studio .intro .picks { flex-direction:row; flex-wrap:wrap; } }
#studio .who { max-width:min(700px, 54vw); } #studio .intro .lead { font-size:17px; }
@media (max-width: 760px) { #studio .who { max-width:none; } }