:root{
    --bg-main: #1C1F23;
    --accent-a: #5E141B;
    --accent-b: #AF9D80;
    --text: #FBFBFB;
    --text-secondary: rgba(251,251,251,.55);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body{
    height:100%;
    overflow:hidden;
}

body{
    font-family:"Poppins", sans-serif;
    background:
        linear-gradient(to right, var(--bg-main), #253A4A);
    background-attachment: fixed;
    color: var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
    padding:24px;
    padding-left: calc(24px + env(safe-area-inset-left, 0px));
    padding-right: calc(24px + env(safe-area-inset-right, 0px));
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
}

.hero-logo{
    width:96px;
    height:96px;
    object-fit:contain;
    margin-bottom:8px;
    opacity:0;
    animation: heroIn .8s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:0.6s;
    pointer-events:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
}

.hero h1{
    font-size:clamp(22px, 6vw, 26px);
    font-weight:700;
    background:linear-gradient(to left, var(--accent-a) 56%, var(--accent-b));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    opacity:0;
    animation: heroIn .8s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:0.75s;
}

.hero p{
    font-size:clamp(13px, 3.5vw, 14px);
    color: var(--text-secondary);
    max-width:min(280px, 84vw);
    padding:0 8px;
    opacity:0;
    animation: heroIn .8s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay:0.85s;
}

@keyframes heroIn{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
}

.mintif-floating{
    position: fixed;
    left: calc(20px + env(safe-area-inset-left, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    transform: scale(1.20);
    outline: none;
    box-shadow:
        0 0 8px rgba(175,157,128,.7),
        0 0 20px rgba(94,20,27,.5);
    animation: fabPulse 2.4s ease-in-out infinite;
}

@keyframes fabPulse{
    0%, 100%{ box-shadow: 0 0 8px rgba(175,157,128,.7), 0 0 20px rgba(94,20,27,.5); }
    50%{ box-shadow: 0 0 12px rgba(175,157,128,.9), 0 0 30px rgba(94,20,27,.7); }
}

.mintif-floating,
.mintif-floating:active{
    outline: none !important;
    border: none !important;
    background: transparent !important;
}
.mintif-floating:focus-visible{
    outline: 2px solid #AF9D80 !important;
    outline-offset: 3px;
    border: none !important;
    background: transparent !important;
}
@media (hover:hover){
  .mintif-floating:hover{
      outline: none !important;
      border: none !important;
      background: transparent !important;
  }
}

.mintif-floating img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    pointer-events:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
}

.mintif-tooltip{
    position:absolute;
    left:60px;
    bottom:50%;
    transform: translateY(50%) translateX(-6px);
    padding:8px 12px;
    border-radius:8px;
    background:#1C1F23;
    color:#FBFBFB;
    font-size:13px;
    white-space:nowrap;
    border:1px solid rgba(175,157,128,.3);
    opacity:0;
    visibility:hidden;
    transition: opacity .2s ease, transform .2s ease;
}

@media (hover:hover){
  .mintif-floating:hover .mintif-tooltip{
      opacity:1;
      visibility:visible;
      transform: translateY(50%) translateX(0);
  }
}
.mintif-floating:focus-visible .mintif-tooltip{
    opacity:1;
    visibility:visible;
    transform: translateY(50%) translateX(0);
}

.circle-overlay{
    position: fixed;
    width: 100px;
    height: 100px;
    left: calc(var(--ox, 50vw) - 50px);
    top: calc(var(--oy, 50vh) - 50px);
    border-radius: 50%;
    background: var(--bg-main);
    z-index: 9999;
    pointer-events: none;
    transform: scale(var(--s, 0));
    transition: transform .65s cubic-bezier(.65, 0, .35, 1);
    will-change: transform;
}
.circle-overlay.no-transition{
    transition: none;
}

@media (prefers-reduced-motion: reduce){
    .hero-logo, .hero h1, .hero p{ animation:none !important; opacity:1 !important; transform:none !important; }
    .mintif-floating{ animation:none; }
    .circle-overlay{ transition:none; will-change:auto; }
}