/* Brighter, editorial opening sequence with a moving hero reveal. */
.opening {
  isolation: isolate;
  perspective: 1200px;
}

.openingPanel {
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(125, 40, 57, .42), transparent 42%),
    linear-gradient(135deg, #100a0a 0%, #301119 58%, #170b0d 100%);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .38);
  transition-duration: 1.35s;
}

.openingPanel::before {
  content: "";
  position: absolute;
  inset: -15%;
  opacity: .32;
  background:
    linear-gradient(115deg, transparent 35%, rgba(244, 214, 151, .13) 49%, transparent 63%),
    repeating-linear-gradient(90deg, transparent 0 89px, rgba(255, 255, 255, .022) 90px);
  transform: translateX(-18%);
  animation: opening-light-sweep 2.4s cubic-bezier(.2, .75, .2, 1) both;
}

.openingGlow {
  z-index: 1;
  width: min(68vw, 620px);
  background: radial-gradient(circle, rgba(211, 160, 77, .22), rgba(118, 31, 49, .17) 37%, transparent 70%);
  filter: blur(2px);
}

.openingBrand {
  z-index: 3;
  padding: 38px 54px 34px;
  text-shadow: 0 5px 30px rgba(0, 0, 0, .65);
  animation: opening-brand-stage 1.05s cubic-bezier(.16, 1, .3, 1) both;
}

.openingBrand::after {
  content: "KIZILAY AVM'NİN HEMEN YANINDA";
  display: block;
  margin-top: 22px;
  font: 600 7px/1 Arial, sans-serif;
  letter-spacing: .37em;
  color: rgba(246, 226, 185, .72);
  animation: opening-caption-in .8s .42s both;
}

.openingMark {
  width: 102px;
  height: 102px;
  margin-bottom: 28px;
  border-color: rgba(242, 204, 126, .95);
  background: radial-gradient(circle at 35% 28%, rgba(255, 232, 180, .12), rgba(77, 19, 31, .34));
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 198, .08),
    inset 0 0 34px rgba(203, 146, 67, .09),
    0 0 0 8px rgba(218, 176, 91, .035),
    0 20px 65px rgba(0, 0, 0, .4),
    0 0 42px rgba(218, 176, 91, .16);
  transform: rotate(45deg);
  animation: opening-crest-set 1.05s cubic-bezier(.16, 1, .3, 1) both;
}

.openingMark::before {
  inset: 8px;
  border-color: rgba(244, 211, 145, .42);
}

.openingMark span {
  font-size: 36px;
  color: #fff2d5;
  text-shadow: 0 0 22px rgba(240, 197, 111, .4);
  transform: rotate(-45deg);
}

.openingMark span:nth-child(2) {
  color: #e5bb69;
  transform: rotate(-45deg) translate(5px, 5px);
}

.openingMark i {
  left: 13px;
  right: 13px;
  bottom: 12px;
  box-shadow: 0 0 12px rgba(229, 187, 105, .7);
}

.openingBrand p {
  font-size: clamp(25px, 2.1vw, 34px);
  letter-spacing: .5em;
  color: #fff5df;
}

.openingBrand small {
  margin-top: 12px;
  font-size: 8px;
  letter-spacing: .52em;
  color: #e2bd76;
}

.openingProgress {
  z-index: 3;
  bottom: 13vh;
  width: min(360px, 58vw);
  background: rgba(255, 255, 255, .13);
  box-shadow: 0 0 22px rgba(216, 173, 91, .12);
}

.openingProgress span {
  background: linear-gradient(90deg, transparent, #e8c47e 20%, #fff0ca 55%, #a96a45);
  box-shadow: 0 0 16px rgba(239, 202, 127, .55);
  animation-duration: 1.65s;
}

.openingMeta {
  z-index: 3;
  color: rgba(255, 239, 207, .58);
}

body.is-opening .heroImage {
  animation: opening-camera-drift 2.6s cubic-bezier(.2, .65, .2, 1) both;
}

body.is-opening.opening-finished .heroImage {
  animation: hero-arrival 2.2s cubic-bezier(.2, .75, .2, 1) both;
}

body.opening-finished .openingBrand,
.openingDone .openingBrand {
  opacity: 0;
  filter: blur(7px);
  transform: scale(1.08);
  transition: opacity .38s ease, transform .55s ease, filter .45s ease;
}

@keyframes opening-brand-stage {
  from { opacity: 0; transform: scale(.76) translateY(24px); filter: blur(13px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes opening-crest-set {
  from { opacity: 0; transform: rotate(25deg) scale(.58); }
  to { opacity: 1; transform: rotate(45deg) scale(1); }
}

@keyframes opening-caption-in {
  from { opacity: 0; letter-spacing: .7em; transform: translateY(8px); }
  to { opacity: 1; letter-spacing: .37em; transform: none; }
}

@keyframes opening-light-sweep {
  from { transform: translateX(-38%); }
  to { transform: translateX(28%); }
}

@keyframes opening-camera-drift {
  from { transform: translate3d(-1.2%, 1.2%, 0) scale(1.22); filter: saturate(.62) brightness(.52); }
  to { transform: translate3d(1%, -1%, 0) scale(1.14); filter: saturate(.84) brightness(.72); }
}

@media (max-width: 600px) {
  .openingBrand { padding: 28px 18px; }
  .openingMark { width: 82px; height: 82px; }
  .openingMark span { font-size: 30px; }
  .openingBrand p { font-size: 22px; letter-spacing: .4em; }
  .openingBrand::after { font-size: 6px; letter-spacing: .24em; }
}

@media (prefers-reduced-motion: reduce) {
  .openingPanel::before,
  .openingBrand,
  .openingMark,
  .openingBrand::after,
  body.is-opening .heroImage { animation: none !important; }
}