/* ===== ADOZET landing v13 ===== */
:root{
  --bg-url: url("../img/adozet-landing.jpg");
  --bg-pos-desktop: center center;
  --bg-size-desktop: cover;

  --bg-url-mobile: url("../img/adozet-landing-mobile.jpg");
  --bg-pos-mobile: 50% 28%;
  --bg-size-mobile: cover;

  --bg-url-tablet-por: url("../img/adozet-landing-tablet-por.jpg");
  --bg-url-tablet-land: url("../img/adozet-landing-tablet-land.jpg");
  --bg-pos-tablet-por: 50% 30%;
  --bg-size-tablet-por: cover;
  --bg-pos-tablet-land: 62% 50%;
  --bg-size-tablet-land: cover;

  --fade-duration: 2600ms;
  --preloader-hide-ms: 900ms;
  --orbit-duration: 1800ms;
  --gold: #b6855f;
  --veil-a: rgba(255,255,255,.90);
  --veil-b: rgba(255,255,255,.96);
}

*{ box-sizing: border-box }
html,body{ height:100% }
body{ margin:0; background:#fff; overflow:hidden; }

.bg{
  position:fixed; inset:0;
  background-image: var(--bg-url);
  background-repeat:no-repeat;
  background-position: var(--bg-pos-desktop);
  background-size: var(--bg-size-desktop);
  opacity:0; transition: opacity var(--fade-duration) ease;
}
.bg.visible{ opacity:1; }

.preloader{
  position:fixed; inset:0; display:grid; place-items:center;
  z-index:10; opacity:1; transition: opacity var(--preloader-hide-ms) ease;
  background: radial-gradient(ellipse at center, var(--veil-a), var(--veil-b));
}
.preloader.hidden{ opacity:0; pointer-events:none; }

.ring{ width:96px; height:96px; border-radius:50%;
  border:2px solid rgba(182,133,95,.38);
  box-shadow:0 0 0 1px inset rgba(182,133,95,.18);
  position:relative; animation: spin var(--orbit-duration) linear infinite;
}
.dot{ width:12px; height:12px; border-radius:50%; background: var(--gold);
  position:absolute; animation: orbit var(--orbit-duration) linear infinite;
  box-shadow:0 0 10px rgba(182,133,95,.6);
}
@keyframes spin{ to{ transform: rotate(360deg) } }
@keyframes orbit{ 0%{ transform: rotate(0deg) translateX(48px) rotate(0deg); }
  100%{ transform: rotate(360deg) translateX(48px) rotate(-360deg); } }

/* Phones */
@media (max-width: 768px){
  :root{ --bg-url: var(--bg-url-mobile); }
  .bg{ background-position: var(--bg-pos-mobile); background-size: var(--bg-size-mobile); }
}
@media (orientation: portrait) and (max-width: 1024px){
  :root{ --bg-url: var(--bg-url-mobile); }
  .bg{ background-position: var(--bg-pos-mobile); background-size: var(--bg-size-mobile); }
}

/* Tablet portrait */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait){
  :root{ --bg-url: var(--bg-url-tablet-por); }
  .bg{ background-position: var(--bg-pos-tablet-por); background-size: var(--bg-size-tablet-por); }
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape){
  :root{ --bg-url: var(--bg-url-tablet-land); }
  .bg{ background-position: var(--bg-pos-tablet-land); background-size: var(--bg-size-tablet-land); }
}

/* Optional: show whole image on very tall ratios */
@media (max-aspect-ratio: 3/4){
  /* .bg{ background-size: contain; background-color:#fff; } */
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .ring,.dot{ animation-duration: calc(var(--orbit-duration) * 1.5); }
}