/*
Theme Name: Kreimer Photography – Offline
Theme URI: https://kreimer.ch
Author: René Kreimer
Author URI: https://kreimer.ch
Description: Statische Hinweisseite im Kreimer-Look (Schwarz/Gold, KP-Logo) mit goldener Linie, die von links nach rechts über den Bildschirm wandert. Informiert Besucher, dass das Projekt beendet wurde und nicht mehr zur Verfügung steht. Als aktives Theme aktivieren – jede Front-End-URL zeigt den Hinweis, das WordPress-Backend bleibt erreichbar.
Version: 1.2.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kreimer-photography-offline
Tags: dark, one-column, custom-logo
*/

:root{
  --bg:#0a0a0a;
  --text:#f0f0f0;
  --muted:rgba(240,240,240,.55);
  --gold-1:#8a6d1f;
  --gold-2:#c9a030;
  --gold-3:#e8c84c;
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'DM Sans','Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; overflow-x:hidden;}

body{
  font-family:var(--font-body);
  color:var(--text);
  overflow-x:hidden;
  background:
    radial-gradient(125% 120% at 50% 24%,
      rgba(10,10,10,.42) 0%,
      rgba(10,10,10,.80) 52%,
      rgba(10,10,10,.96) 100%),
    url('assets/background.jpg') center / cover no-repeat,
    var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* faint film grain */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-size:120px 120px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  padding:clamp(1.5rem,5vw,3rem);
}

/* slow golden glow behind the monogram */
.glow{
  position:absolute; top:50%; left:50%;
  width:min(640px,92vw); height:min(640px,92vw);
  transform:translate(-50%,-60%);
  background:radial-gradient(circle,
    rgba(201,160,48,.16) 0%,
    rgba(201,160,48,.05) 38%,
    transparent 70%);
  filter:blur(6px);
  z-index:0; pointer-events:none;
  animation:pulse 7s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:.55; transform:translate(-50%,-60%) scale(1);}
  50%{opacity:1; transform:translate(-50%,-60%) scale(1.06);}
}

.content{
  position:relative; z-index:2;
  max-width:46rem;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1rem,2.6vw,1.6rem);
  animation:rise 1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:none;}
}

.mark{
  width:clamp(72px,12vw,104px); height:auto;
  border-radius:22%;
  filter:drop-shadow(0 8px 28px rgba(201,160,48,.20));
  user-select:none;
}

.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(.72rem,2vw,.82rem);
  letter-spacing:.30em;
  text-transform:uppercase;
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2),var(--gold-3));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.statement{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--text);
  font-size:clamp(1.5rem, 1rem + 3.4vw, 2.7rem);
  line-height:1.22;
  letter-spacing:.005em;
  max-width:22ch;
  text-wrap:balance;
}

/* the golden line – now travels left -> right across the whole screen */
.rule{
  position:relative; left:0;
  width:90px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--gold-2) 35%, var(--gold-3) 65%, transparent);
  box-shadow:0 0 12px 1px rgba(201,160,48,.40);
  z-index:1; pointer-events:none;
  animation:streak 6.5s linear infinite;
}
@keyframes streak{
  from{ transform:translateX(-53vw); }
  to{   transform:translateX(53vw); }
}

.foot{
  position:absolute; left:0; right:0;
  bottom:clamp(1rem,3vw,1.8rem);
  z-index:2;
  color:var(--muted);
  font-size:.72rem; letter-spacing:.14em;
}

/* Reduced motion: keep a calm, static golden divider instead */
@media (prefers-reduced-motion: reduce){
  .glow,.content{animation:none;}
  .rule{
    position:static; top:auto; left:auto;
    transform:none; animation:none; box-shadow:none;
    width:64px;
    background:linear-gradient(90deg,transparent,var(--gold-2),transparent);
  }
}