/* ===== Base ===== */
:root{
  --brand:#E2A9F3;
  --brand-2:#b8691d;
  --ink:#000;
  --paper:#fff;
  --soft: 10px;
  --shadow: 0 20px 40px rgba(0,0,0,.08);
  --cardH: 560px;          /* înălțime de “slide” pe desktop */
  --gap: clamp(16px,3vw,40px);
}

*{box-sizing:border-box}
html,body{height:100%}

body {
  font-family: IBM Plex Mono, sans-serif;
  background: linear-gradient(250.59deg, white 0%, #F8E0E6 0.53%, #E0F8EC 55.52%);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: var(--ink);
  scroll-behavior: smooth;
}

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== Navbar ===== */
.navbar {
  position: sticky; top:0; z-index:1000;
  background: rgba(226,169,243,.9);
  backdrop-filter: blur(6px);
  width: 100%;
  display:flex; gap:.5rem; justify-content:center;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.navbar a {
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 18px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing:.3px;
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
  border-radius: 999px;
}
.navbar a:hover, .navbar a:focus-visible {
  background-color: var(--brand-2);
  transform: translateY(-1px);
}

/* ===== Play controls ===== */
.plaay{
  display:flex; align-items:center; gap:1rem; padding: 1rem 1.25rem;
}
.play-controls{
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.fred { border-radius: 90px; border:1px solid rgba(0,0,0,.2); }
.play-controls button{
  border:1px solid rgba(0,0,0,.2);
  background:#fff;
  border-radius:999px;
  padding:.5rem 1rem;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.play-controls button:hover{ transform: translateY(-1px) }
.play-controls button:active{ transform: translateY(0) scale(.98) }

/* ===== Sections ===== */
.section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  padding: 24px;
  margin: 16px;
  text-align: center;
}
.section:nth-of-type(even) { flex-direction: row-reverse; }

.title {
  width: 100%;
  margin: 0 0 16px 0;
  font-size: 24px;
  color: #d9883b;
  letter-spacing:.5px;
}

.content, .media {
  flex: 1 1 420px;
  padding: 20px;
  text-align: center;
  border: 2px solid rgba(0,0,0,.8);
  border-radius: 14px;
  background: rgba(255,255,255,.6);
  box-shadow: var(--shadow);
}

.content { filter: drop-shadow(10px 10px 5px lightblue); }
.content h2 {
  font-size: 40px;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  color: black;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px black;
}

.media { border: 2px solid black; border-radius: 14px; }
.media video, .media img {
  width: 100%;
  max-width: 640px;
  border-radius: 12px;
  filter: drop-shadow(10px 10px 5px #E2A9F3);
  display:block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Hover zoom */
.content p, .media img, .media video {
  transition: transform 0.3s ease, box-shadow .3s ease;
  will-change: transform;
}
.content p:hover, .media img:hover, .media video:hover { transform: scale(1.03); }

/* Read more / less toggles */
label {
  display: inline-block; cursor: pointer; color: black; background-color: var(--brand);
  padding: 6px 14px; border-radius: 10px; margin-top: 12px; font-weight:600;
  transition: transform .15s ease, background .2s ease, opacity .2s ease;
}
label:hover{ transform: translateY(-1px) }
label:active{ transform: translateY(0) scale(.98) }
.more{ display:inline-block } .less{ display:none }

.unu, .doi, .trei, .patru, .cinci, .sase, .sapte, .opt {
  display: none; color: black; font-size: 20px; text-align: left; padding: 8px 0;
  font-weight: 400; letter-spacing: .3px; position: relative; line-height: 1.6;
}
#ch1:checked ~ .unu, #ch2:checked ~ .doi, #ch3:checked ~ .trei, #ch4:checked ~ .patru,
#ch5:checked ~ .cinci, #ch6:checked ~ .sase, #ch7:checked ~ .sapte, #ch8:checked ~ .opt {
  display:block; animation: fadeIn .35s ease
}
#ch1:checked ~ .more, #ch2:checked ~ .more, #ch3:checked ~ .more, #ch4:checked ~ .more,
#ch5:checked ~ .more, #ch6:checked ~ .more, #ch7:checked ~ .more, #ch8:checked ~ .more { display:none }
#ch1:checked ~ .less, #ch2:checked ~ .less, #ch3:checked ~ .less, #ch4:checked ~ .less,
#ch5:checked ~ .less, #ch6:checked ~ .less, #ch7:checked ~ .less, #ch8:checked ~ .less { display:inline-block }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }

/* Buttons inside content */
.btn{
  display:inline-flex; justify-content:center; align-items:center;
  min-width: 180px; height: 44px; padding: 0 18px;
  border-radius:999px; border:2px solid #000; font-weight:700; text-decoration:none; color:#000;
  background: #fff; box-shadow: var(--shadow);
  transition: transform .15s ease, background .2s ease, color .2s ease; margin-top:10px;
}
.btn:hover{ transform: translateY(-1px); background:#000; color:#fff }

/* ===== Dragon / Carousel (separare TEXT vs IMG) ===== */
.dragon{
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 40px 0;
}

.carousel{
  width: min(1200px, 94vw);
  display: grid;
  grid-template-columns: 1fr 1fr;          /* text | media */
  align-items: center;
  gap: var(--gap);
  position: relative;
  z-index: 1;
}

.carousel .box-info{
  position: relative;
  width: 100%;
  height: var(--cardH);
  overflow: hidden;
  pointer-events:none;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding-inline: clamp(8px,1.5vw,16px);
}

.box-info .list-info{
  transition: transform 0.8s cubic-bezier(0.68,-0.55,0.265,1.55);
  height: 100%;
}

.list-info .info{
  display: flex; align-items: center; flex-direction: column; justify-content: center;
  color: #111; text-align:center; height: var(--cardH);
  padding: clamp(10px,2vw,24px);
}

.list-info .info h2{ font-size: clamp(22px, 3.2vw, 38px); text-transform: uppercase; margin:0; color:#111 }
.list-info .info .text{ font-size: clamp(14px,1.6vw,18px); margin: 14px 0; color:#333 }
.list-info .info .btn{ border-color:#111; color:#111 }

.carousel .list-img{
  position: relative;
  height: var(--cardH);
  transition: transform 0.8s cubic-bezier(0.68,-0.55,0.265,1.55);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(0,0,0,.06);
}

.list-img .item{
  position: relative;
  height: var(--cardH);
  display: grid;
  place-items: center;
}

.item img, .item video{
  position: relative;
  right: auto;
  max-width: min(90%, 640px);
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.15));
  animation: anna 5s infinite;
  border-radius: 12px;
}

/* Navigation */
.navigation {
  position: relative;
  margin-top: 20px;
  display:flex; gap:12px; z-index:2;
}
.navigation span {
  display: inline-flex; justify-content: center; align-items: center;
  width: 56px; height: 56px;
  background: rgba(0,0,0,.15);
  border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  cursor: pointer; font-size: 42px; color: #fff;
  transition: transform .15s ease, background .2s ease;
}
.navigation span:hover{ transform: translateY(-2px); background: rgba(0,0,0,.25) }

/* Background waves */
.bg-box{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.bg-box .bg { position: absolute; width: 100%; height: 100%;
  transition: clip-path 0.8s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.bg-box .bg:nth-child(1){ background: linear-gradient(360deg, #2E9AFE, #2EFEF7) }
.bg-box .bg:nth-child(2){ background: linear-gradient(360deg, #550802, #f40401) }
.bg-box .bg:nth-child(3){ background: linear-gradient(360deg, #696901, #ffff03) }
.bg-box .bg:nth-child(4){ background: linear-gradient(360deg, #823043, #fac0cb) }
.bg-box .bg:nth-child(2), .bg-box .bg:nth-child(3), .bg-box .bg:nth-child(4){ clip-path: circle(0% at 50% 50%) }
.bg-box .bg.active{ clip-path: circle(75% at 50% 50%) }

/* ===== Scroll to top ===== */
#backToTop{
  position: fixed; right: 18px; bottom: 18px; width: 48px; height: 48px;
  border-radius: 999px; border: none; background: rgba(0,0,0,.75); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 1200;
}
#backToTop.show{ opacity:1; visibility:visible; transform: translateY(0) }
#backToTop i{ font-size: 24px }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  :root{ --cardH: 520px; }
}

@media (max-width: 900px){
  :root{ --cardH: 480px; }
  .carousel{ grid-template-columns: 1fr; }
  .navigation{ margin-top: 12px }
}

@media (max-width: 768px) {
  :root{ --cardH: 420px; }
  .section { flex-direction: column; }
  .media { margin: auto; }
  .content, .media { margin-left: auto; margin-right: auto; width: 100%; max-width: 100%; }
  .media img, .media video { max-width: 100%; height: auto; aspect-ratio: 16/9 }
  .content h2{ font-size: 30px; -webkit-text-stroke:.8px black; }
  .carousel{ width: 96vw; gap: 14px; }
  .list-info .info h2{ font-size: clamp(20px,5.2vw,28px) }
}

@media (max-width: 520px){
  :root{ --cardH: 360px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}