*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#e30613}
body{min-height:100svh;overflow:hidden}
.page{position:relative;width:100vw;height:100svh;overflow:hidden;background:#e30613}
.base{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center 42%}

/* Mobile portrait v7: refined seamless artwork with matched upper background and slightly raised content.
   Keeps the approved WATIK logo scale, removes duplicate Persian text,
   and eliminates horizontal joins. */
@media (max-aspect-ratio:1/1){
  .page{background:#e30613}
  .base{
    content:url('assets/watik-mobile-v7.jpg');
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center center;
    transform:none;
    -webkit-mask-image:none;
    mask-image:none;
  }
}

@media (min-aspect-ratio:16/10) and (max-height:700px){
  .base{content:url('assets/watik-base.png');object-fit:cover;object-position:center 43%}
}


/* WATIK v7 — animated white rings for desktop + mobile. No other visual changes. */
.rings{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  pointer-events:none;
  z-index:2;
}

.rings i{
  position:absolute;
  left:0;
  top:0;
  width:120px;
  height:120px;
  margin:-60px 0 0 -60px;
  border:1px solid rgba(255,255,255,.44);
  border-radius:50%;
  opacity:0;
  transform:scale(.72);
  animation:watikRipple 4.8s linear infinite;
  box-shadow:
    0 0 7px rgba(255,255,255,.10),
    inset 0 0 7px rgba(255,255,255,.05);
  will-change:transform,opacity;
}

.rings i:nth-child(2){animation-delay:-1.2s}
.rings i:nth-child(3){animation-delay:-2.4s}
.rings i:nth-child(4){animation-delay:-3.6s}

@keyframes watikRipple{
  0%   {transform:scale(.72);opacity:0}
  10%  {opacity:.34}
  55%  {opacity:.17}
  100% {transform:scale(7.4);opacity:0}
}

/* Desktop center */
@media (min-aspect-ratio:1/1){
  .rings{
    left:50%;
    top:46.5%;
  }
}

/* Mobile portrait center */
@media (max-aspect-ratio:1/1){
  .rings{
    left:50%;
    top:44.5%;
  }
  .rings i{
    width:110px;
    height:110px;
    margin:-55px 0 0 -55px;
  }
}

@media (prefers-reduced-motion:reduce){
  .rings i{animation:none;opacity:.16;transform:scale(4.2)}
}