/*!
 * Bootstrap v4.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 + @import url('https://fonts.googleapis.com/css?family=Roboto:100,300,700&display=swap');
 */




/* =========================

   ALOREYA – STYLE SHEET

   ========================= */



/* 1) Farb- & Typo-Setup */

:root{

  /* Core Palette */

  --bg-deep: #070b16;          /* sehr dunkles Nachtblau */

  --bg-grad-1: #0b1630;        /* tiefes Blau */

  --bg-grad-2: #02040a;        /* fast schwarz */

  --ink: #eaf2ff;              /* fast weiss mit bläulichem Touch */

  --ink-dim: #b9c6ff;

  --gold: #f6c347;             /* warmes Gold */

  --gold-2: #f0b02a;

  --cyan: #45e1ff;             /* türkiser Akzent */

  --accent: #7ad7ff;



  /* Surfaces (Glassmorphism) */

  --glass: rgba(255,255,255,0.06);

  --glass-stroke: rgba(255,255,255,0.12);

  --shadow: 0 10px 30px rgba(0,0,0,0.45);



  /* Layout */

  --maxw: 1100px;

  --radius: 16px;

  --space-1: 8px;

  --space-2: 14px;

  --space-3: 22px;

  --space-4: 36px;

  --space-5: 64px;



  /* Typography */

  --font-ui: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  --font-display: "Cinzel", Georgia, "Times New Roman", serif;  /* wirkt edel/hymnisch */

  --h1: clamp(2.2rem, 4vw, 3.6rem);

  --h2: clamp(1.6rem, 2.6vw, 2.2rem);

  --lead: clamp(1.05rem, 1.5vw, 1.25rem);

}



/* Optional: Google Font (Cinzel) – kannst du weglassen, wenn offline

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&display=swap');

*/



/* 2) Reset & Base */

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{

  margin:0;

  color:var(--ink);

  background: radial-gradient(1200px 800px at 70% -10%, var(--bg-grad-1), transparent 60%),

              radial-gradient(1000px 800px at -10% 20%, #0a183b, transparent 50%),

              var(--bg-deep);

  font-family: var(--font-ui);

  line-height:1.5;

  -webkit-font-smoothing: antialiased;

  text-rendering: optimizeLegibility;

}



/* 3) Globale Hilfen */

.container{

  width: min(100% - 32px, var(--maxw));

  margin-inline: auto;

}

.section{

  padding: var(--space-5) 0 var(--space-5);

}

h1,h2{

  font-family: var(--font-display);

  margin:0 0 var(--space-3);

  letter-spacing:.5px;

}

h1{ font-size: var(--h1); }

h2{ font-size: var(--h2); }

p{ margin: 0 0 var(--space-3); color:var(--ink-dim); font-size:var(--lead); }



a{ color: var(--accent); text-decoration: none; }

a:hover{ text-decoration: underline; }



/* Tastaturfokus sichtbar & schön */

:focus-visible{

  outline: 2px solid var(--cyan);

  outline-offset: 3px;

  border-radius: 6px;

}



/* 4) Hero / Opener */

.hero{

  position: relative;

  min-height: 88svh;

  display: grid;

  place-items: center;

  text-align: center;

  padding: var(--space-5) var(--space-2);

  overflow: clip;

  isolation: isolate;

}



/* Sternenstaub / Glow-Hintergrund */

.hero::before{

  content:"";

  position:absolute; inset:-20% -20% -10% -20%;

  background:

    radial-gradient(800px 800px at 50% 20%, rgba(69,225,255,0.15), transparent 60%),

    radial-gradient(600px 400px at 50% 120%, rgba(246,195,71,0.18), transparent 70%);

  filter: blur(18px);

  z-index:-2;

}

.hero::after{

  content:"";

  position:absolute; inset:0;

  background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.18) 40%, transparent 41%),

                    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,.16) 40%, transparent 41%),

                    radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,.12) 40%, transparent 41%);

  background-size: 300px 300px, 260px 260px, 340px 340px;

  background-repeat: repeat;

  opacity:.6;

  z-index:-1;

}



.logo{

  width: clamp(120px, 22vw, 220px);

  height:auto;

  filter: drop-shadow(0 0 18px rgba(246,195,71,.45))

          drop-shadow(0 0 40px rgba(69,225,255,.18));

  margin-bottom: var(--space-3);

}

.hero h1{

  background: linear-gradient(180deg, #cfe8ff 0%, #ffffff 40%, var(--gold) 100%);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  text-shadow: 0 0 20px rgba(122,215,255,.15);

}

.hero p{

  max-width: 60ch;

  margin-inline:auto;

}



.cta-wrap{

  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;

  margin-top: var(--space-3);

}



/* 5) Buttons */

.button, .cta-button{

  display:inline-block;

  padding: 12px 20px;

  border-radius: 999px;

  border: 1px solid transparent;

  font-weight: 600;

  letter-spacing:.2px;

  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;

  will-change: transform;

  cursor: pointer;

  background: linear-gradient(90deg, var(--gold), var(--gold-2));

  color: #1b1200;

  box-shadow: 0 6px 20px rgba(246,195,71,.28);

}

.button--ghost{

  background: transparent;

  color: var(--ink);

  border-color: rgba(255,255,255,.25);

  box-shadow: none;

}

.button:hover, .cta-button:hover{

  transform: translateY(-1px);

  box-shadow: 0 10px 26px rgba(246,195,71,.34);

}

.button--ghost:hover{

  background: rgba(255,255,255,.06);

  border-color: rgba(255,255,255,.4);

}



/* 6) About */

.about{

  display:grid; gap: var(--space-4);

  grid-template-columns: 1.1fr .9fr;

  align-items:center;

}

.about img{

  width:100%; height:auto; border-radius: var(--radius);

  box-shadow: var(--shadow);

  border:1px solid var(--glass-stroke);

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

}



/* 7) Music Grid (Releases) */

.music-grid{

  display:grid; gap: var(--space-3);

  grid-template-columns: repeat(3, 1fr);

}

.release{

  position:relative;

  background: var(--glass);

  border: 1px solid var(--glass-stroke);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  overflow:hidden;

  backdrop-filter: blur(10px);

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;

}

.release:hover{

  transform: translateY(-4px);

  box-shadow: 0 18px 40px rgba(0,0,0,.55);

  border-color: rgba(255,255,255,.28);

}

.release img{

  width:100%; aspect-ratio: 1 / 1; object-fit: cover; display:block;

}

.release .card-body{

  padding: var(--space-3);

}

.release .title{

  font-weight:700; color:#fff; margin-bottom:8px;

}

.release .meta{

  font-size:.95rem; color: var(--ink-dim); margin-bottom: 12px;

}

.release .actions{

  display:flex; gap:10px; flex-wrap: wrap;

}



/* 8) Video (responsive Embed) */

.video-embed{

  position:relative; width:100%; aspect-ratio: 16 / 9;

  border-radius: var(--radius);

  overflow:hidden; box-shadow: var(--shadow);

  border:1px solid var(--glass-stroke);

}

.video-embed iframe{

  position:absolute; inset:0; width:100%; height:100%; display:block;

}



/* 9) Footer */

footer{

  margin-top: var(--space-5);

  padding: var(--space-4) 0 var(--space-5);

  border-top: 1px solid rgba(255,255,255,.08);

  background: linear-gradient(180deg, transparent, rgba(255,255,255,.03));

}

.footer-row{

  display:grid; gap: var(--space-3);

  grid-template-columns: 1.4fr .6fr;

  align-items:start;

}

.socials{

  display:flex; gap:14px; flex-wrap:wrap;

}

.socials a{

  padding:8px 12px; border-radius: 999px;

  border:1px solid rgba(255,255,255,.18);

  background: rgba(255,255,255,.04);

}

.socials a:hover{

  background: rgba(255,255,255,.09);

}



/* 10) Micro-Anim: sanftes Logo-Glühen */

@keyframes glow{

  0%,100%{ filter: drop-shadow(0 0 14px rgba(246,195,71,.38)) drop-shadow(0 0 30px rgba(69,225,255,.14)); }

  50%{ filter: drop-shadow(0 0 24px rgba(246,195,71,.55)) drop-shadow(0 0 50px rgba(69,225,255,.24)); }

}

.logo{ animation: glow 6s ease-in-out infinite; }



/* 11) Reduzierte Bewegung respektieren */

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

  .logo, .release, .button, .cta-button{ animation: none !important; transition: none !important; }

}



/* 12) Responsive Breakpoints */

@media (max-width: 960px){

  .about{ grid-template-columns: 1fr; }

  .music-grid{ grid-template-columns: repeat(2, 1fr); }

  .footer-row{ grid-template-columns: 1fr; }

}

@media (max-width: 620px){

  .music-grid{ grid-template-columns: 1fr; }

  .cta-wrap{ gap:10px; }

}



/* 13) Kleine Deko-Linie unter H2 */

h2{

  position:relative; padding-bottom: 12px;

}

h2::after{

  content:"";

  position:absolute; left:0; bottom:0;

  width: 80px; height:3px;

  background: linear-gradient(90deg, var(--gold), transparent);

  border-radius: 2px;

}



/* 14) Utility */

.mute{ color: var(--ink-dim); }


.center{ text-align:center; }