<!DOCTYPE html>

<head>

<title>at@berninger.at</title>

<!-- <link rel="preload" as="image" href=„sailing.jpg">

<style>

:root {

/* Put your exact filenames or URLs here */

--img-sailing: url(‚sailing.jpg');

--img-ocean: url(‚ocean.jpg');

--img-portrait:url(‚face.jpg'); /* the black & white selfie */

--cycle: 21s; /* full slideshow duration (≈7s per image) */

--text: #fff;

}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {

margin: 0;

font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

color: var(--text);

background: #0b0b0b;

overflow: hidden;

}

/* Background layers */

.bg {

position: fixed;

inset: 0;

background-size: cover;

background-repeat: no-repeat;

will-change: opacity, transform, background-position;

opacity: 0;

transform: scale(1.035);

}

/* Per-image tuning: overlay + focal point */

.bg.bg1 {

/* Sailing: darker overlay for the bright sail */

background-image:

linear-gradient(rgba(0,0,0,0.44), rgba(0,0,0,0.44)),

var(--img-sailing);

background-position: 70% center; /* keeps person/sail visible */

}

.bg.bg2 {

/* Ocean wave: slightly lighter overlay */

background-image:

linear-gradient(rgba(0,0,0,0.34), rgba(0,0,0,0.34)),

var(--img-ocean);

background-position: 40% 55%;

}

.bg.bg3 {

/* Portrait: stronger overlay so text pops; nudge left to keep face */

background-image:

linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.50)),

var(--img-portrait);

background-position: 25% 35%;

}

/* Crossfade for 3 slides */

@keyframes crossfade3 {

0%, 27% { opacity: 1; }

33%, 94% { opacity: 0; }

100% { opacity: 1; }

}

/* Gentle Ken Burns zoom */

@keyframes zoom {

from { transform: scale(1.035); }

to { transform: scale(1.08); }

}

.animate.bg1 {

animation:

crossfade3 var(--cycle) linear infinite,

zoom calc(var(--cycle) * 2) ease-in-out infinite alternate;

}

.animate.bg2 {

animation:

crossfade3 var(--cycle) linear infinite calc(var(--cycle) / 3),

zoom calc(var(--cycle) * 2) ease-in-out infinite alternate calc(var(--cycle) / 3);

}

.animate.bg3 {

animation:

crossfade3 var(--cycle) linear infinite calc(var(--cycle) * 2 / 3),

zoom calc(var(--cycle) * 2) ease-in-out infinite alternate calc(var(--cycle) * 2 / 3);

}

/* Soft edge vignette to center the eye on the text */

.vignette {

position: fixed;

inset: 0;

pointer-events: none;

background: radial-gradient(ellipse at center,

rgba(0,0,0,0) 40%,

rgba(0,0,0,0.35) 100%);

}

main {

min-height: 100vh;

display: grid;

place-items: center;

text-align: center;

padding: 2rem;

}

a.email {

color: inherit;

text-decoration: none;

font-weight: 800;

font-size: clamp(2rem, 12vw, 9rem);

letter-spacing: -0.02em;

line-height: 1.05;

text-shadow: 0 2px 22px rgba(0,0,0,0.55);

border-bottom: 0.08em solid rgba(255,255,255,0.35);

transition: transform 0.15s ease, border-color 0.2s ease, text-shadow 0.2s ease;

}

a.email:hover,

a.email:focus-visible {

border-color: rgba(255,255,255,0.9);

transform: scale(1.02);

text-shadow: 0 4px 28px rgba(0,0,0,0.65);

outline: none;

}

/* Small/portrait screens: adjust focal points */

@media (max-aspect-ratio: 3/4) {

.bg.bg1 { background-position: 72% 40%; }

.bg.bg2 { background-position: 45% 55%; }

.bg.bg3 { background-position: 50% 30%; }

}

/* Reduce motion accessibility */

@media (prefers-reduced-motion: reduce) {

.animate { animation: none !important; }

.bg { opacity: 0; transform: none; }

.bg.bg1 { opacity: 1; } /* show the first image only */

}

</style>

</head>

<body>

<main>

at@berninger.at

</a>

</main>

</body>

</html>